v-bind

基本用法

v-bind 用于绑定一个或多个属性值,或者向另一个组件传递 props值(后期介绍链接)。

前面学习的指令主要作用是将值插入到我们模板的内容当中,但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定,比如:动态绑定 a 元素的 href 属性、动态绑定 img 元素的 src 属性。

这时可以使用 v-bind 指令来动态绑定属性

<img v-bind:src="imgSrc">
<a v-bind:href="aHref">百度一下</a>

简写方式如下:

<img :src="imgSrc">
<a :href="aHref">百度一下</a>

class绑定

很多时候,我们希望动态的来切换class,比如:

  • 当数据为某个状态时,字体显示红色;
  • 当数据另一个状态时,字体显示黑色。

绑定 class 有两种方式:对象语法数组语法。

用法一:绑定一个类

<div :class="{ red: isRed }"></div>

数组语法:

<div :class="[ red ]"></div>

用法二:绑定多个类

<div :class="{ classA: isA, classB: isB }"></div>

数组语法;

<div :class="[ classA, classB ]"></div>

用法三:和普通的类同时存在

<div class="classA" :class="{ classB: isB, classC: isC }"></div>

数组语法:

<div class="classA" :class="[ classB, classC ]"></div>

用法四:如果过于复杂,可以放在一个methods或者computed

注:classes是一个计算属性

<div class="classA" :class="classes"></div>

style 绑定

<div :style="{ fontSize: size + 'px' }"></div>

数组语法:

<div :style="[styleObjectA, styleObjectB]"></div>

计算属性computed

基础用法

模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

当想要在模板中多次引用此处的翻转字符串时,就会更加难以处理。所以,对于任何复杂逻辑,都应当使用计算属性,基础用法:

HTML

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

JS:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

计算属性的setter和getter

每个计算属性都包含一个 getter 和一个 setter,在上面的例子中,我们只是使用getter 用来读取值,在某些情况下也可以使用setter 用来设置值(不常用)
在这里插入图片描述

计算属性的缓存

methods 和 computed 看起来都可以实现我们的功能,为什么还要多一个计算属性呢?

原因:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。

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

Logo

前往低代码交流专区

更多推荐