Vue快速学习笔记(2)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的计算属性，

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="assets/plugins/vue.js"></script>

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

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