碎言博客

Vue快速学习笔记(2)Vue中的监听与计算属性

J.sky 2020-02-01 10:31:26 Vue

Vue中的监听

watch 用来监听 Vue 实例中数据的变化,然后可以出发一个事件。 例如,反转字符串:

<script src="assets/plugins/vue.js"></script>
<div id="app">
    <input type="text" v-model="vt">
    <p v-text="nvt"></p>
</div>


<script>
   var vm = new Vue({
        el:"#app",
        data:{
            vt:"",
            nvt:""
        },
        watch: {
            vt:function(val){
                this.nvt=this.vt.split('').reverse().join('')

            }
        },
    })

</script>

除了 watch 选项之外,您还可以使用命令式的 vm.$watch API。

Vue中的计算属性

计算属性和监听有些相似,有的时候作用都差不多吧。

下边的例子就是采用Vue的计算属性,

<div id="app1">
    <p>计算属性</p>
    <input type="text" v-model="vt">
    <p v-text="rtvt"></p>
</div>


<script>


    var vm1 = new Vue({
        el :"#app1",
        data:{
            vt:""
        },
        computed: {
            rtvt:function(){
                return this.vt.split("").reverse().join("")
            }
        },

    })

</script>

感觉计算属性要比监听简单直观些。

发现错误?想参与编辑? 在 GitHub 上编辑此页!

如果您有什么问题,欢迎加入Python/Javascript学习讨论群询问

Python/Javascript学习QQ群号:217840699