Vue-11、Vue计算属性

Vue计算属性是Vue实例的属性,用来根据已有的数据进行计算得到新的数据。计算属性的值会根据它的依赖缓存起来,在依赖没有发生改变时直接返回缓存的值,提高了性能。

计算属性的定义方式为在Vue实例中使用computed关键字,并将计算属性的名字作为键,计算属性的值为一个函数,函数返回需要计算的值。

以下是一个使用计算属性的例子:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
})

这个例子中,reversedMessage是一个计算属性,它根据message的值进行计算并返回计算结果。每次使用reversedMessage时,如果message的值没有发生改变,就会直接返回之前缓存的计算结果,而不需要再次计算。

计算属性还可以设置gettersetter,用于监听和响应数据的变化。在计算属性的对象中,可以使用getset关键字来定义gettersetter方法。

var vm = new Vue({
  el: '#app',
  data: {
    firstname: '张',
    lastname: '三'
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstname + '-' + this.lastname;
      },
      set: function (newValue) {
        var names = newValue.split('-');
        this.firstname = names[0];
        this.lastname = names[1];
      }
    }
  }
})

在这个例子中,fullName是一个计算属性,它的getter方法返回firstNamelastName拼接而成的字符串,setter方法则接受一个新值,并根据新值的格式重新设置firstNamelastName的值。

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性姓名案例</title>
    <!--引入vue-->
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root">
    姓:<input type="text"  v-model="firstname"><br>
    名:<input type="text"  v-model="lastname"><br>
    姓名:<span>{{fullname}}</span><br>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false;
    new Vue({
        el:"#root",
        data:{
            firstname:'张',
            lastname:'三'
        },
        computed:{
            fullname: {
              get() {//当有人读取fullname时。get就会被调用,且返回值就作为fullname的值
                  //get什么时候调用?  1、初次读取fullname时。2、所依赖的数据发生变化时。
                  return this.firstname+'-'+this.lastname;
              },
                //set什么时候被调用?当fullname被修改时。
                set(newvalue) {
                  const  arr = newvalue.split('-');
                  this.firstname=arr[0];
                  this.lastname=arr[1];
                }
            }
        }
    })
</script>
</body>
</html>

总结
Vue-11、Vue计算属性_第1张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)