[Vue基础实战]getter及setter的使用

参考代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>getter及setter的使用</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="title" />
      <input type="text" v-model="name" />
      <input type="button" value="修改计算属性" @click="changName">
    </div>
    <script src="../js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          title: "aaaa",
          name: "bbbb",
        }, 
        methods: {
          changName(){
            this.fullName="cccc-dddd";
          }
        },
        computed:{
          fullName:{
            get:function(){
              return this.title+this.name;

            },
            set:function(newVal){
              var parts=newVal.split('-');
              this.title=parts[0];
              this.name=parts[1];
            }
          }
        }      

      });
    </script>
  </body>
</html>

 

posted @ 2021-01-17 23:21  dshow  阅读(372)  评论(0)  编辑  收藏  举报