浅入深出Vue：数据绑定

上一篇咱们使用了简单的数据渲染，那么若是说咱们想要动态渲染标签的 class 能够这么操做么？

为何绑定

简单的数据渲染，包括表达式、函数在内。其实都只是在标签中渲染，若是遇到如下状况怎么办呢：

• 须要在标签内部进行某种 "骚操做" 。

• 须要控制流来控制不一样数据下的不一样渲染效果。

• 须要渲染一个数组。

这时候简单渲染就不能很好的解决问题了，怎么办 ？

来一发数据绑定吧！

绑定是什么

在了解绑定是什么以前，先了解一下什么是指令：

在 " vue" 中，指令是带有 v- 前缀的特殊属性，用来修饰标签的（自定义组件在这里也统一归为标签，由于其使用方式和原生标签同样），其值的约束和模板语法同样，支持表达式、变量。

• 指令会监测其值的变化，并将其的变化反应给所处的DOM

咱们来看一下上一章最后的例子：

<h1>{{ if(msg == '1') return time }}</h1>

在这里咱们是想利用控制流来控制是否显示时间，可是很遗憾，模板语法并不支持js语法。

可是 " vue" 中有这样一个指令来弥补模板语法不支持 js语法的遗憾：

v-if

下面看看修改后的代码：

<h1 v-if="msg=='1'">{{ formatTime(time) }}</h1>

先将 msg的值赋值为1：

而后再修改一下 msg的值看看：

什么也没有显示，由于咱们 msg的值并非 1。

v-if 指令很完美的解决了咱们最开始提出来的第二个问题：

• 须要控制流来控制不一样数据下的不一样渲染效果。

让咱们回到最开始的话题。

这就是指令，而在官方原生的指令中，有一个指令是专门用来绑定标签属性的：

v-bind

命名很形象，bind 直译就是绑定的意思。

如何绑定

这里利用 div标签展现一下 v-bind 的使用方式，用在其它标签上同理：

<div v-bind:属性名="表达式"></div>

咱们拿第一个问题举例实践一下：

• 须要在标签内部进行某种 "骚操做"。

这里咱们就根据 isDark的值来肯定时间显示的背景色吧

• 当 isDark为 true 的时候，背景色变成黑色，文字变成白色。

• 当 isDark为 false的时候，背景色变成白色，文字变成黑色。

先来定义 isDark:

data() {
    return {
      msg: 'hello vue',
      time: new Date(),
      isDark: False
    }
  }

而后添加一下两种条件下的样式：

<style>
  .dark{
    background-color: black;
    color: white;
  }

  .light{
    background-color: white;
    color: black;
  }
</style>

接下来给 h1标签加上绑定指令：

<h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>

效果以下：

咱们将 isDark 的值修改为 true：

很完美的达到了所需求的效果。

这就是指令的魅力。

最后一个问题

上述两个指令解决了咱们最初提出来三个问题中的两个，那么剩下一个呢？

• 须要渲染一个数组。

当咱们须要渲染表格的时候就会遇到这个场景，如何去渲染一个数组呢？模板语法又并不支持这么复杂的操做。

请出本章最后一个指令：

v-for

嗯，仍是很形象。js里面也有 for 嘛~

先看看它是作什么的：

• v-for 会为数据源（绑定的列表）中的每一项，生成一个同类的标签。

而后看看怎么用，这里用 a 标签作说明，其余标签相似：

<!-- 写法1 -->

<a v-for="别名 in 数据源" v-bind:key="惟一标识">{{ 别名.字段 }}</a>

<!-- 写法2 -->

<a v-for="(下标, 别名) in 数据源" v-bind:key="惟一标识">{{ 别名.字段 }}</a>

由于新版本的 vue要求使用 v-for指令渲染的标签必须绑定一个key用作惟一标识，大多数状况下咱们能够直接使用下标来进行标识

继续使用咱们以前的代码进行演示，先定义一个 url的数组：

data() {
    return {
      msg: 'hello vue',
      time: new Date(),
      isDark: true,
      urlList: [
        {
          text: '连接1',
          url: '#1'
        },

        {
          text: '连接2',
          url: '#2'
        },

        {
          text: '连接3',
          url: '#3'
        }
      ]
    }
  }

而后渲染安排一波：

<a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>

效果以下：

渲染的结果是三个 a 标签，很是正确~

很完美的解决了最后一个问题。

还有些什么指令呢？

官方还有其余的指令，这里再提一个：

v-on

v-on 指令能够绑定事件，好比说按钮的点击事件。

像上面切换背景的例子中，能够经过一个按钮的点击事件来修改 isDark的值，从而控制背景的改变。就不须要每次都手动来修改下 isDark的值了。

这个实践就留给好奇心止不住的你来吧~