Vue数据绑定实例编写

为什么要捆绑

简单的数据呈现，包括表达式和函数。事实上，它们只在标签中呈现。如果遇到以下情况，我该怎么办：

需要在标签内部进行某种‘骚操作’。

需要控制流来控制不同数据下不同的渲染效果。

您需要呈现一个数组。

这时，简单的渲染并不能很好地解决问题。我该怎么办？

让我们开始数据绑定！

什么是绑定

在了解什么是绑定之前，让我们先了解什么是指令：

在' vue '中，指令是带有v前缀的特殊属性，用于修改标签(用户定义的组件在这里也被归类为标签，因为它们的使用方式与本机标签相同)，它们的值约束与模板语法相同，支持表达式和变量。

该指令将监控其值的变化，并将其变化反映到它所在的DOM中

让我们看一下上一章的最后一个例子：

h1{{ if(msg=='1 ')返回时间}}/h1

这里我们想用控制流来控制是否显示时间，但遗憾的是，模板语法不支持js语法。

但是‘vue’中有这样一条指令，弥补了模板语法不支持js语法的遗憾：

控制显示

让我们看看修改后的代码：

h1 v-if=' msg==' 1 ' { { format time(time)} }/h1

首先，将msg的值指定为1:

然后修改msg的值以查看：

没有显示任何内容，因为我们的消息值不是1。

v-if指令完美地解决了我们在开头提出的第二个问题：

需要控制流来控制不同数据下不同的渲染效果。

让我们回到开头。

这是指令，在正式的本机指令中，有一条指令专门用于绑定标签属性：

垂直装订

命名很生动，bind的直译就是绑定。

如何绑定

这里，div标签用于显示如何使用v-bind，其他标签也是如此：

Div v-bind:属性名=' expression' /div

让我们以第一个问题为例：

需要在标签内部进行某种‘骚操作’。

在这里，我们将根据isDark的值来确定时间显示的背景颜色

当isDark为真时，背景颜色变为黑色，文本变为白色。

当isDark为false时，背景颜色变为白色，文本变为黑色。

让我们首先定义isDark:

data() {返回{ msg: 'hello vue '，time: new Date()，isDark: False } }

然后在两种情况下添加样式：

风格。深色{背景-颜色：黑色；color:白色；} .浅色{底色-颜色：白色；color:黑色；}/样式

接下来，向h1标签添加绑定指令：

h1 v-bind:class='isDark '？深色' : '浅色' {{ formatTime(time) }}/h1

效果如下：

我们将isDark的值改为true:

完美地达到了预期的效果。

这就是教学的魅力。

最后一个问题

以上两条说明解决了我们最初提出的三个问题中的两个，剩下的一个呢？

您需要呈现一个数组。

当我们需要渲染一张表时，我们会遇到这种场景。我们如何渲染一个数组？模板语法不支持如此复杂的操作。

请给出本章最后的说明：

迭代

嗯，还是很生动的。js里也有for ~

让我们先看看它的功能：

V-for为数据源(绑定列表)中的每个项生成一个同类标签。

然后看怎么用。这里，用A标签来解释一下。其他标签类似：

！-在数据源“v-bind:key=”的唯一标识“{alias。字段}}/a！-在数据源“v-bind:key=”唯一标识“{alias。字段}}/a

因为新版本的vue要求用v-for指令呈现的标签必须绑定一个密钥，以便唯一识别，所以在大多数情况下，我们可以直接使用下标进行识别

继续使用我们之前的代码来演示，首先定义一个URL数组：

data(){ return { msg : ' hello vue '，time: new date()，isdark : true，urllist3360 [{text:' link 1 '，URL 3360' # 1'}，{text:' link 2 '，Url: '#2' }，{text:' link 3 '，URL : ' # 3 ' } } }

然后渲染并排列一个波：

urlList“v-bind : key=”索引“v-bind : href=”item . URL“rel=”外部no follow“{ item . text } }/a中的v-for=“(item，index)”

效果如下：

渲染的结果是三个A标签，非常正确~

它完美地解决了最后一个问题。

还有什么其他说明？

还有其他官方指令，这里还有一个：

绑定事件

V-on指令可以绑定事件，比如按钮点击事件。

和上面切换背景的例子一样，可以通过点击按钮来修改isDark的值，从而控制背景的变化。不需要每次都手动修改isDark的值。

感谢您学习以上知识点，支持我们。