上一篇我们使用了简单的数据渲染, 那么如果说我们想要动态渲染标签的 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 的值了.
这个实践就留给好奇心止不住的你来吧~
来源: https://www.cnblogs.com/By-ruoyu/p/11123102.html