VUE----computed & watch

最新推荐文章于 2021-07-20 15:42:31 发布

Li_fengxiao

最新推荐文章于 2021-07-20 15:42:31 发布

阅读量160

点赞数

分类专栏：前端文章标签： vue 前端 computed watch

本文链接：https://blog.csdn.net/qq_38228582/article/details/105291814

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UFT-8">
    <title>
        vue
    </title>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>


<!-- 
    计算属性: computed
    侦听器: watch
    使用场景: watch(异步场景) computed(数据联动)
 -->
<body>
    <div id="app">
        {{msg}}
        <p>
            {{msg1}}
        </p>
    </div>

    <script>
        var arr = 'new test'

        // 将vue赋值给一个变量就可以在控制台调试vue
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello vue!',
                another: 'another Hello Vue!'
            },
            methods: {

            },
            watch: {
                msg: function (newval, oldval) {
                    console.log('newval is ' + newval)
                    console.log('oldval is ' + oldval)
                }
            },
            computed: {
                msg1: function () {
                    // 由 msg + another 组成的 msg1 在 vue实例中任意一个值变化 都会影响到msg1 
                    return 'computed:' + this.msg + ',' + this.another + arr
                }
            },

        })
    </script>
</body>
</html>

Li_fengxiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE----computed & watch

<!DOCTYPE html><html lang="en"><head> <meta charset="UFT-8"> <title> vue </title> <script src="https://cdn.bootcss.com/vue/2.6.11/vue...
复制链接

扫一扫