computed属性和watch属性的区别之二【computed的基本用法】

来源：互联网发布：网络用语我爱萝卜编辑：程序博客网时间：2024/06/07 12:51

<body>    <div id = 'app'>        <div>            <h3>{{title}}</h3>        </div>        <div>            <h5>案例1</h5>            <p>改变前的值：{{oldMsg}}</p>            <p>改变后的值：{{newMsg}}</p>        </div>        <hr>        <div>            <h5>案例2</h5>            <p><input type="text" v-model = 'value'><button @click = 'm_change()'>点击</button></p>            <p>改变前的值：{{oldMsg2}}</p>            <p>改变后的值：{{newMsg2}}</p>        </div>    </div>    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>    <script type="text/javascript">        var _vm = new Vue({            data : {                title : 'computed属性和watch属性的区别之二【computed的基本用法】',                oldMsg : 'abcdefg',                // newMsg : ''  // 易错，用computed属性返回的值不需要在这里定义，                  oldMsg2 : 'ABCDEFG',                value : ''            },            computed : {                // 默认是getter方法                newMsg : function () {                      return this.oldMsg.split('').reverse().join('') ;                },                newMsg2 : {                    set : function(value) {                        this.oldMsg2 = value ;  // 修改oldMsg2的值                    },                    get : function() {                        return this.oldMsg2.split('').reverse().join('') ;                    }                }            },            methods : {                m_change : function() {                    this.newMsg2 = _vm.value;                }            }        }).$mount('#app') ;    </script></body>

阅读全文

0 0