04-vue的计算属性

1、使用计算属性实现两个名字的连接

<body>
  <div id ="app">
    <!-- 1、直接在mustache里面加入空格进行使用 -->
    <h2>{{firstName+' '+lastName}}</h2>
    <!-- 2、使用两个语法来进行拼接 -->
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{firstName}}</h2>
    <!-- 3、使用methods函数 -->
    <h2>{{getFullname()}}</h2>
    <!-- 4、使用计算属性：优点是 ，易读性 -->
    <h2>{{Fullname}}</h2>
    <!-- 使用计算属性可以增加代码的美观和别人易于解读 -->
  </div>

  <script>
   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data: {
      firstName:'kobre',
      lastName:'heilun'
    },
    methods:{
      getFullname:function(){
        return this.firstName+' '+this.lastName
      }
    },
    computed:{
      Fullname:function(){
        return this.firstName+' '+this.lastName
      }
    }
    
   });
  </script>
</body>

 

posted @ 2022-03-03 16:47  starter123  阅读(41)  评论(0)    收藏  举报