首页 / VUE / Vue数据绑定实例写法
Vue数据绑定实例写法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue数据绑定实例写法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3286字，纯文字阅读大概需要5分钟。
内容图文
为什么绑定
简单的数据渲染，包括表达式、函数在内。其实都只是在标签中渲染，如果遇到以下情况怎么办呢：
需要在标签内部进行某种 "骚操作" 。
需要控制流来控制不同数据下的不同渲染效果。
需要渲染一个数组。
这时候简单渲染就不能很好的解决问题了，怎么办 ？
来一发数据绑定吧！
绑定是什么
在了解绑定是什么之前，先了解一下什么是指令：
在 " 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" rel="external nofollow" >{{item.text}}</a>
效果如下：
渲染的结果是三个 a 标签，非常正确~
很完美的解决了最后一个问题。
还有些什么指令呢？
官方还有其他的指令，这里再提一个：
v-on
v-on 指令可以绑定事件，比如说按钮的点击事件。
像上面切换背景的例子中，可以通过一个按钮的点击事件来修改 isDark的值，从而控制背景的改变。就不需要每次都手动来修改下 isDark的值了。
感谢大家学习以上知识点内容和对脚本之家的支持。
内容总结
以上是互联网集市为您收集整理的Vue数据绑定实例写法全部内容，希望文章能够帮你解决Vue数据绑定实例写法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。