weex 数据绑定,动态控制组件的显示内容及样式

  无论的原生开发还是weex开发,经常会需要我们对一些组件/控件动态赋值,在原生中,我们大家都知道,对控件setText就可以了,那么在weex中呢,我们需要怎么做呢,其实很简单,几行代码就可以搞定!
首先呢,需要知道一个概念叫“数据绑定”,即组件会根据内容的变化重新进行渲染,先看一下效果展示及代码:

weex 数据绑定,动态控制组件的显示内容及样式

weex 数据绑定,动态控制组件的显示内容及样式

<template> <div style="justify-content: center;align-items: center;flex-direction: column"> <text style="font-size: 30px;color: blue">{{mValue}}</text> <div style="background-color: aqua;width: 300px;height: 60px;align-items: center;justify-content: center;margin-top: 40px" @click="clickMe"> <text style="font-size: 30px;color: #000;">点我啊!!!</text> </div> </div> </template> <style> </style> <script> var navigator = weex.requireModule('navigator'); navigator.setNavBarTitle({'title': ''}, null); export default{ data: { mValue: '点击之前的文案' }, methods: { clickMe:function(){ this.mValue = '点击之后的文案'; } }, created: function () { }, mounted: function () { } } </script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwwjjd.html