Vue基础语法6

最新推荐文章于 2024-05-19 20:18:26 发布

晓殇大人

最新推荐文章于 2024-05-19 20:18:26 发布

阅读量36

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/dx3906nnn/article/details/128524783

版权

监听与计算

<body>
    <div id='app'>
        <input type="text" v-model="frist">
        <span>+</span>
        <input type="text" v-model="last">
        <button @click="res">=</button>
        <input type="text" v-model="resul">
    </div>
</body>

<script>


    /* 
1.	computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
2.	methods方法表示一个具体的操作，主要书写业务逻辑；
3.	watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体

*/
    const vm = new Vue({
        el: '#app',
        data: {
            frist: '',
            last: '',
            // resul: ''
        },
        methods: {
            res() {
                // this.resul = `${this.frist}+${this.last}`
            }
        },
        //监听
        watch: {
            // 参数为监听到的新数据
            // frist: function (val) {
            //     console.log(val);
            //     this.resul = val + '+'
            // },
            // last: function (val) {
            //     console.log(val);
            //     this.resul += val
            // },

            // 可以直接对坚挺的变量进行处理
            /*    frist: {
                   //handler()方法可以查找到监听变量的新数据和旧数据
                   handler(newdata, olddata) {
                       console.log(newdata);
                       console.log(olddata);
                   },
                   immediate: true,  //立即监听: 当页面创建时,就开始对选中变量进行监听
                   //深度监听: 如果数据嵌套时(如对象包对象包数据...),想要拿到深层的数据,就需要深度监听
                   deep: true
               }, */
        },
        // 计算
        computed: {
            // 计算的属性，不能在data中定义
            resul: {
                // 该方法在所需要的值变化时才会调用
                get() {
                    return this.frist + '-' + this.last
                },
                // 该方法只有当resul本身变动时,才会调用,参数就是resul改变后的值
                set(val) {
                    console.log(val);
                }
            }
        }
    })
</script>