实例成员之计算属性与监听属性

实例成员

一、字符串补充

在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>