加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 大数据 > 正文

v-bind、v-on、计算属性

发布时间:2020-12-14 04:36:40 所属栏目:大数据 来源:网络整理
导读:v-bind ?缩写 1 !-- 完整语法 -- 2 a v-bind:href ="url" ... / a 3 4 !-- 缩写 -- 5 a :href ="url" ... / a ? v-on ?缩写 !-- 完整语法 -- a v-on:click ="doSomething" ... / a !-- 缩写 -- a @click ="doSomething" ... / a 计算属性 div id ="example"

v-bind?缩写

1 <!-- 完整语法 -->
2 <a v-bind:href="url">...</a>
3 
4 <!-- 缩写 -->
5 <a :href="url">...</a>

?v-on?缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: ‘#example‘,data: {
    message: ‘Hello‘
  },computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split(‘‘).reverse().join(‘‘)
    }
  }
})

?

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值。这就意味着只要?message?还没有发生改变,多次访问?reversedMessage?计算属性会立即返回之前的计算结果,而不必再次执行函数。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读