vue的计算属性的set方法--几乎不用，了解就行

来源：互联网发布：excel 数据收集编辑：程序博客网时间：2024/05/16 16:55

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="vue.js"></script></head><style type="text/css">#app {margin: 50px auto;width: 500px;}fieldset{border: 1px solid orange;}fieldset input{width: 400px;height: 30px;margin: 10px 0;}table{width: 500px;border: 1px solid orange;text-align: center;margin-top: 40px;}thead{background-color: orange;color: white;}button{width: 90px;height: 40px;background-color: rosybrown;}</style><body><div id="app">          <p>{{fullName }}</p>          <button  @click="deal()">调用计算属性的setter方法</button></div><script type="text/javascript">new Vue({el: '#app',data: {fistName:'zhang',lastName:'sanfeng'},methods:{deal(){this.fullName='Token Lily'}} ,computed:{//fullName(){//return this.fistName+this.lastName//}                 fullName:{                  fullName(){                 return this.fistName+this.lastName                 },                   //set方法                 set(str){                   let nameArr=str.split('');                   this.firstName=nameArr[0];                    this.lastName=nameArr[1];            alert(str)                                    }                  }                 //get方法                               }})</script></body></html>

阅读全文

0 0