Vue数据绑定实例写法


Posted in Javascript onAugust 06, 2019

为什么绑定

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

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

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

需要渲染一个数组。

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

来一发数据绑定吧!

绑定是什么

在了解绑定是什么之前,先了解一下什么是指令:

在 " 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

Vue数据绑定实例写法

然后再修改一下 msg的值看看:

Vue数据绑定实例写法

什么也没有显示,因为我们 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>

 

效果如下:

Vue数据绑定实例写法

我们将 isDark 的值修改成 true:

Vue数据绑定实例写法

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

这就是指令的魅力。

最后一个问题

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

需要渲染一个数组。

当我们需要渲染表格的时候就会遇到这个场景,如何去渲染一个数组呢?模板语法又并不支持这么复杂的操作。

请出本章最后一个指令:

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>

 

效果如下:

Vue数据绑定实例写法

渲染的结果是三个 a 标签,非常正确~

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

还有些什么指令呢?

官方还有其他的指令,这里再提一个:

v-on

v-on 指令可以绑定事件,比如说按钮的点击事件。

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

感谢大家学习以上知识点内容和对三水点靠木的支持。

Javascript 相关文章推荐
重定向实现代码
Nov 20 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
javascript delete 使用示例代码
Mar 29 Javascript
Javascript实现滑块滑动改变值的实现代码
Apr 12 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
详解create-react-app 自定义 eslint 配置
Jun 07 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
Vue代码整洁之去重方法整理
Aug 06 #Javascript
VUE写一个简单的表格实例
Aug 06 #Javascript
VUE前后端学习tab写法实例
Aug 06 #Javascript
Vue路由前后端设计总结
Aug 06 #Javascript
vue实现行列转换的一种方法
Aug 06 #Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 #Javascript
详解使用WebPack搭建React开发环境
Aug 06 #Javascript
You might like
PHP之数组学习
2011/05/29 PHP
PHP数组实例总结与说明
2011/08/23 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
JavaScript Eval 函数使用
2010/03/23 Javascript
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
JavaScript中return false的用法
2015/03/12 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
基于python socketserver框架全面解析
2017/09/21 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python 动态调用函数实例解析
2019/10/21 Python
Python分类测试代码实例汇总
2020/07/23 Python
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
.NET方向面试题
2014/11/20 面试题
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
自动化专业个人求职信范文
2013/12/30 职场文书
党员公开承诺书
2014/03/25 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
2014年团支部年度工作总结
2014/12/24 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
导游词之无锡丝业博物馆
2019/11/12 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
Python可视化神器pyecharts之绘制地理图表练习
2022/07/07 Python