實例成員之計算屬性與監聽屬性

實例成員

一、字符串補充

在js中，字符串能夠和python中的f-string格式化同樣

一、字符串拼接變量能夠用引號拼接（單引號和雙引號同樣）

"前綴" + 變量 + "後綴"

二、反引號拼接相似於f-string，${ 變量 }

`前綴${變量}後綴`

二、實例成員：計算屬性 computed

一、其實就是vue中的方法屬性，方法名能夠直接做爲屬性名使用，屬性值是返回的結果

二、在computed中聲明的方法，不能在data中重複聲明，computed中方法屬性比data中聲明的屬性能夠寫更多的邏輯

三、方法屬性，自帶監聽機制，在方法屬性中出現的變量，都會被監聽，一旦有任何監聽到的變量變化，都會調用方法屬性一次

四、方法屬性必定要在頁面中渲染一次，方法屬性纔有意義，屢次渲染，方法屬性只會被調用一次

五、方法屬性的應用場景：一個變量依賴於多個變量，且須要進行必定的邏輯運算，好比：計算器

計算器案例

<div id="app">
    <input type="number" v-model="num1">
    +
    <input type="number" v-model="num2">
    =
    <button>{{ sum }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            num1: '',
            num2: '',
            // sum: ''  重複聲明瞭
        },
        computed:{
            sum(){
                // num1 和 num2 中有值，&&表示和
                if (this.num1 && this.num2){
                    // 存數字字符串前加+變爲數字
                    return +this.num1 + +this.num2;
                }
                return '計算'
            }
        }
​
    })
</script>

三、實例成員：監聽屬性 watch

一、watch中不定義屬性，只監聽屬性，因此watch方法的返回值沒有任何意義，只是監聽變量值是否發生更新

二、watch中的方法名，就是被監聽的屬性，（方法名就是被監聽的變量名）

三、被監聽的變量一旦發生變化，監聽方法就會被調用

四、應用場景：1.k線圖，股票數據變化，k線圖從新渲染，將邏輯數據轉換成圖像；2.拆分姓名，錄入的名字拆分紅姓和名，將數據邏輯拆分紅多個數據

<div id="app">
姓名： <input type="text" v-model="full_name">
    <hr>
    姓： <button>{{ first_name }}</button>
    名： <button>{{ last_name }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            full_name: '',
            first_name: '',
            last_name: ''
        },
        watch: {
            full_name(){
                if (this.full_name){
                    this.first_name=this.full_name.split("")[0];
                    this.last_name=this.full_name.split("")[1];
                } else {
                    this.first_name='未知';
                    this.last_name='未知'
                }
            }
        }
    })
</script>