weex 數據綁定，動態控制組件的顯示內容及樣式

　　不管的原生開發仍是weex開發，常常會須要咱們對一些組件/控件動態賦值，在原生中，咱們你們都知道，對控件setText就能夠了，那麼在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>

text標籤經過「{{mValue}}」綁定數據，爲了頁面不展現空白，在data裏面設置默認值，這個默認值能夠爲任意數據，再經過爲div設置點擊事件，動態的控制text的內容，很簡單吧！！！
那若是需求不單單是動態的改變文案的內容呢，若是產品要求內容變化的同時，text的背景顏色也要變化呢，一樣的道理，經過數據綁定，爲text標籤綁定一個背景的樣式，點擊div，文案和背景同時變化：

<template>
    <div style="justify-content: center;align-items: center;flex-direction: column">
        <text :class="showWhich ? bg_style : bg_style1" 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>
    .bgOne{
        background-color: #afddff;
    }
    .bgTwo{
        background-color: chartreuse;
    }
</style>

<script>
    var navigator = weex.requireModule('navigator');
    navigator.setNavBarTitle({'title': ''}, null);
    export default{
        data: {
            mValue: '點擊以前的文案',
            bg_style:['bgOne'],
            bg_style1:['bgTwo'],
            showWhich:true
        },
        methods: {
            clickMe:function(){
                this.mValue = '點擊以後的文案';
                this.showWhich = false;
            }
        },
        created: function () {

        },
        mounted: function () {

        }
    }
</script>

其實道理都是同樣的，首先給text設置一個默認的背景樣式，我這裏只寫了一個背景顏色，而後經過一個布爾類型的變量來控制顯示哪一種樣式，觸發點擊事件，會改變布爾變量的值，進而渲染不一樣的背景

紅色標記的這行代碼就是一句三目運算，showWhich爲true，渲染bg_style的背景，反之渲染bg_style1背景。

其實沒什麼難度，若是有不理解或不清楚的地方，歡迎評論提疑！！！