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 相关文章推荐
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
Jul 26 Javascript
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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php递归调用删除数组空值元素的方法
2015/04/28 PHP
PHP封装CURL扩展类实例
2015/07/28 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python pycharm的安装及其使用
2019/10/11 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
init进程的作用
2015/08/20 面试题
优纳科技软件测试面试题
2012/05/15 面试题
出生医学证明样本
2014/01/17 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
春风行动实施方案
2014/03/28 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
办理信用卡工作证明
2014/09/30 职场文书
党内外群众意见范文
2015/06/02 职场文书
2019年最新证婚词精选集!
2019/06/28 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android