Vue数据绑定实例如何改写为长尾词？

本文共计1642个文字，预计阅读时间需要7分钟。

为什么绑定+简单的数据渲染，包括表达式、函数在内。实际上，只是在标签中渲染，如果遇到以下情况怎么办：需要在内标签内部进行某种操作。需要控制不同数据下的显示内容。

为什么绑定

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

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

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

需要渲染一个数组。

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

来一发数据绑定吧！

绑定是什么

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

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

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

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

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

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