一文读懂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 相关文章推荐
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JS实现可调整倒计时间代码分享
Aug 18 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
JavaScript每天必学之数组和对象部分
Sep 17 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
原生js实现表格循环滚动
Nov 24 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中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
php跨服务器访问方法小结
2015/05/12 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
PHP大文件分割分片上传实现代码
2020/12/09 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
详解使用jQuery.i18n.properties实现js国际化
2018/05/04 jQuery
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
express express-session的使用小结
2018/12/12 Javascript
监控Nodejs的性能实例代码
2019/07/02 NodeJs
jQuery实现简易QQ聊天框
2020/02/10 jQuery
如何基于js判断浏览器版本
2020/02/20 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
python微信撤回监测代码
2019/04/29 Python
详解python破解zip文件密码的方法
2020/01/13 Python
Python多线程通信queue队列用法实例分析
2020/03/24 Python
python实现感知机模型的示例
2020/09/30 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
给领导的致歉信范文
2014/01/13 职场文书
采购经理岗位职责
2014/02/16 职场文书
个人委托书怎么写
2014/09/17 职场文书
房屋过户委托书范本
2014/10/07 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书