Vue 第十三章 watch属性和computed属性使用

1、watch属性使用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn镜像快速导入Vue包-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
</div>
<script>
    //2.创建一个vue实例
    var vm = new Vue({
        el: '#app',    //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            firstname:'',
            lastname:'',
            fullname:'',
            msg: '欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
        },
        methods:{},
        watch:{
            //使用这个属性，可以监视data中指定数据的变化，然后触发这个watch中对于的function处理函数
            'firstname':function(newVal,oldVal){
                console.log("监听到了变化")
                // this.fullname = this.firstname + '-' + this.lastname
                this.fullname = newVal + '_' + this.lastname
            },
            'lastname':function(newVal ,oldVal){
                console.log("监听到了变化")
                // this.fullname = this.firstname + '-' + this.lastname
                this.fullname = this.firstname + '-' + newVal
            }
        }
    })
</script>
</body>
</html>

2、watch属性使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--cdn镜像快速导入Vue包-->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="firstname">+
    <input type="text" v-model="lastname">=
    <input type="text" v-model="fullname">
    <p>{{fullname}}</p>
</div>
<script>
    //2.创建一个vue实例
    var vm = new Vue({
        el: '#app',    //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            firstname:'',
            lastname:'',
            msg: '欢迎学习Vue' //通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序
        },
        methods:{},
        computed:{
            //在computed中，可以定义一些属性，这些属性叫做计算属性，计算属性本质就是一个方法，
            //只不过我们在使用这些计算属性的时候，是把他们的名称直接当作属性来使用的，并不会把
            //计算属性当作方法去调用
            //注意：计算属性在引用的时候，一定不要加()去调用，直接把它当作普通属性去绑定
            //注意：只要计算属性这个function内部所用到的任何data中的数据发生变化，就会立即重新计算这个属性
            //注意：计算的求值结果会被缓存起来，方便下次调用，如果计算属性方法中，所有的任何数据
            //都没有发生变化，则不会重新计算属性求值
            'fullname':function () {
                        return this.firstname + '-'+ this.lastname
            }
        }
    })
</script>
</body>
</html>

 

posted @ 2020-03-25 15:23  小白啊小白，Fighting  阅读(268)  评论(0)    收藏  举报