一文读懂vue动态属性数据绑定(v-bind指令)


Posted in Javascript onJuly 20, 2020

v-bind的基本用法

一、本节说明

前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢?
这就是我们这节开始要讲的内容v-bind.

二、 怎么做

一文读懂vue动态属性数据绑定(v-bind指令)

  • “:”为v-bind的简写形式,也可称为语法糖

三、 效果

一文读懂vue动态属性数据绑定(v-bind指令)

四、 深入

  • 在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定。
  • 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态改变它的属性值。

错误的写法

  • 注意一下:初学者容易犯错,这样写是错误的,v-bind:href="{{toutiao}}" rel="external nofollow" 。
  • 下面的写法也无法正常的完成属性值绑定操作,注意双引号中间有一对单引号。
<a v-bind:href="'toutiao'" rel="external nofollow" >今日头条(v-bind:href)</a>

一文读懂vue动态属性数据绑定(v-bind指令)

加上单引号之后,并不会进行属性值绑定,而是将字符串原样渲染后绑定属性上。

v-bind绑定calss属性(对象语法)

一、本节说明

v-bind绑定元素除了上一节那种直接进行单个属性值绑定,还可以传入对象和数组。如:本节我们讲解使用对象语法的方式对class属性进行绑定。

  • 我们先来看看,传统的html的css类引用语法
    <h2 class="css类名1 css类名2">html传统写法</h2>
  • v-bind对象语法,我们需要队css-class类名赋一个boolean值,来决定css类是否生效。
    <h2 v-bind:class="{css类名1: true|false, css类名2: true|false}">{{message}}</h2>

初次看这种写法,实在是繁琐,没有我们直接在html标签上写class更加简单。但是v-bind:class语法的好处就在于,我们可以动态的改变布尔值,来切换样式。

  • 问题:我们使用了v-bind:class,那么class属性还能不能用了?
    答:可以,完全不耽误,vue会帮你将二者合并
<h2 v-bind:class="{css类名1: true|false, css类名2: true|false}" class="css类名3">{{message}}</h2>

我们利用上面的语法,实现一个简单的需求:为文字增加颜色,并点击按钮实现颜色的切换。

二、 怎么做

首先,定义两个css的类,blue和red是两个css的类名

.blue {
 color: blue;
}
.red {
 color: red;
}

然后我们来实现视图模型,isBlue=true表示默认设置文字的颜色是蓝色的

一文读懂vue动态属性数据绑定(v-bind指令)

有的时候我们会觉得在双引号里面去写css类有点怪异,并且IDE无提示。css类比较多的情况下,我们也可以把属性值对象绑定,通过自定义函数来返回

一文读懂vue动态属性数据绑定(v-bind指令)

三、 效果

上面两种方式,实现的效果是一样的,蓝色的文字

一文读懂vue动态属性数据绑定(v-bind指令)

四、 深入

那我们如何动态的切换颜色呢,这就需要我们自定义方法啦

  • 视图代码,@click是v-on:click的简写形式,changeColor是我们自定义的切换颜色的方法
<button @click="changeColor">换颜色</button>
  • 视图模型(app),在methods代码段加入自定义函数changeColor
changeColor(){
 this.isBlue = !this.isBlue
 this.isRed = !this.isRed
}

最终效果

一文读懂vue动态属性数据绑定(v-bind指令)

v-bind绑定class属性(数组语法)

一、本节说明

在上一节中,我们讲了如何使用v-bind对象语法的方式绑定class属性,并实现了样式的切换。这一节我们来学习v-bind绑定class属性的另外一种语法-数组语法。这种数组语法在实际应用中并不如对象语法常见,其用法容易理解,但书写相对繁琐。

  • 数组语法绑定class类
<div :class="['css类名1','css类名2']">数组语法</div>
  • 数组中嵌套对象
<div :class="['css类名1', 'css类名2', {css类名3: true|false}]"> 数组中嵌套对象</div>
  • 注意对象里面的css类名不用加单引号,和上一节用法是一致的

二、 怎么做

我们利用数组语法,实现一个和上一节对象语法一样的需求:为文字增加颜色,并点击按钮实现颜色的切换。首先我们定义css类

一文读懂vue动态属性数据绑定(v-bind指令)

下面是具体的实现

一文读懂vue动态属性数据绑定(v-bind指令)

  • 我们默认的定义了一个带有css类名的数组['bold','blue'],默认是粗体蓝色
  • 使用pop()和push方法操作数组,pop是把数组最后一个元素移除,push是在数组尾部加入一个元素

三、 效果

一文读懂vue动态属性数据绑定(v-bind指令)

为文字增加颜色,并点击按钮实现颜色的切换(这里是浏览器截图,点击无效)

四、 深入:哪些数组操作是响应式的?

在上文中,我们使用数组的pop()和push()方法去操作数组元素,而不是使用this.cssArray[1] = 'blue'直接操作数组。因为这种通过下标操作数组的方式不是响应式的,也就是说虽然数组元素的值会发生变化,但不会导致页面颜色发生切换。

所以,当我们希望通过操作数据影响页面显示内容及显示效果的时候,要使用数组相关的函数,不能直接使用数组下标操作数据。下面列举一下经常用到的响应式的数组操作函数:

  • push(param…) 加入元素到数组的尾部
  • pop() 从数组的尾部弹出一个元素
  • shift() 从数组的头部移除一个元素
  • unshift(param…) 加入元素到数组的头部
  • splice() 可以实现指定下标的数组元素的删除、插入、替换
  • sort() 数组排序
  • reverse() 数组倒序排序

如果你对这些方法还不是很熟,有必要去复习一下这些js的基础知识。

v-bind绑定style属性

一、本节说明

上一节我们使用绑定对象或数组的语法来实现css的class类动态样式切换,这一节我们学习绑定style属性值实现动态的样式。

注意:

  • 我们使用v-bind来绑定class或style属性的主要目的是实现:css样式的动态切换。
  • 如果单纯的为html标签加样式,不需要动态切换,就不需要使用v-bind绑定。属于画蛇添足,自找麻烦。

二、 怎么做

直接在元素上通过 :style 的形式,书写样式对象

<h2 :style="{color: 'red', 'font-size': '40px'}">这是一个红色的H2</h2>

实现一个字体大小动态变化的需求

一文读懂vue动态属性数据绑定(v-bind指令)

  • 动态修改data.fontSize,从而达到动态改变字号大小的目的。
  • 从上图中,我们可以看到,可以将css样式属性保存在一个对象里面,绑定到style属性上面。
  • 抽取其中需要变化的部分,用数据模型变量来替换。从而达到动态修改样式的效果

三、 效果

一文读懂vue动态属性数据绑定(v-bind指令)

四、 深入

style属性除了可以绑定一个对象,还可以使用数组绑定的语法,引用多个 data 上的样式对象。用法如下:

  • 在data上定义样式:
data: {
 style1: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
 style2: { font-style: 'italic' }
}

在元素中,通过属性绑定的形式,将样式对象组成一个数组应用到元素中:

<h2 :style="[style1, style2]">这是一个蓝色的斜体的h2</h2>

以上就是一文读懂vue动态属性数据绑定(v-bind指令)的详细内容,更多关于vue 动态属性数据绑定的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
详解jQuery中的empty、remove和detach
Apr 11 Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 Javascript
jQuery实现元素的插入
Feb 27 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
ionic选择多张图片上传的示例代码
Oct 10 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
Mar 13 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 #Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 #Javascript
详细分析vue表单数据的绑定
Jul 20 #Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 #Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 #Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 #Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 #Javascript
You might like
php常用Stream函数集介绍
2013/06/24 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
使用PHP编写发红包程序
2015/07/22 PHP
实现PHP搜索加分页
2016/10/12 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
PHP常量DIRECTORY_SEPARATOR原理及用法解析
2020/11/10 PHP
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
Prototype框架详解
2015/11/25 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python统计中文字符数量的两种方法
2019/01/31 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
婚前协议书
2014/04/15 职场文书
人民调解员培训方案
2014/06/05 职场文书
预备党员转正思想汇报
2014/09/26 职场文书
总经理岗位职责范本
2015/04/01 职场文书
教师节表彰会主持词
2015/07/06 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
如何写通讯稿
2015/07/22 职场文书
2016年班主任新年寄语
2015/08/18 职场文书