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

2024-07-30 07:13:45

v-bind的基本用法

一、本节说明

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

二、怎么做

“:”为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>

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

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表示默认设置文字的颜色是蓝色的

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

三、效果

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

四、深入

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

视图代码，@click是v-on:click的简写形式，changeColor是我们自定义的切换颜色的方法

<button @click="changeColor">换颜色</button>

视图模型（app），在methods代码段加入自定义函数changeColor

changeColor(){
  this.isBlue = !this.isBlue
  this.isRed = !this.isRed
}

最终效果

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类

下面是具体的实现

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

三、效果

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

四、深入：哪些数组操作是响应式的？

在上文中，我们使用数组的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>

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

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

三、效果

四、深入

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 动态属性数据绑定的资料请关注我们其它相关文章！

利用Vue的v-for和v-bind实现列表颜色切换

需求: 在页面上显示四个列表,初始时字体为黑色. 鼠标点击某一个列表时,该列表的颜色变为红色,其余列表仍为黑色. 代码实现:  <style> .red{ color: red; } </style>  <div id="app"> <ul> <li v-for="item,index in movies" :class="{re
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

最近学了点vuejs,把学的东西记录下来方便你我他. vuejs的官方文档:https://vuejs.org/v2/api/ (还是要习惯看官方文档啊同志们~) 1. v-for进行遍历比如我这里想遍历videos里的所有元素,那么我输入 <div v-for="v in videos"> <a :href="v" rel="external nofollow" >啦啦啦</a> </div>
vue.js学习笔记之v-bind和v-on解析

v-bind 指令用于响应地更新 HTML 特性形式如:v-bind:href 缩写为 :href; v-on 指令用于监听DOM事件形式如:v-on:click 缩写为 @click; <body> <div id="test"> <img v-bind:src="src"> <a v-bind:href="url" rel="external nofollow"
详细分析vue表单数据的绑定

v-model的基本用法一.本节说明前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做我们通过v-model实现一个简单的需求通过表单input绑定模型数据message,表单数据变化data.message也发生变化然后通过Mustache表达式,将变化之后的message数据显示到视图页面上三.
vue学习笔记之指令v-text && v-html && v-bind详解

一 : 指令的概念: 指令是vue自定义的以v-开头的自定义属性.每个不同的属性都有各自不同的意义和功能二 : 指令的语法: v-指令名 = "表达式判断或者是业务模型中属性名或者事件名" 三 : 具体指令 1. v-text 作用 : 操作元素中的纯文本快捷方式 : {{}} 栗子1 简写形式:将v-text=""换成{{}} <div id="app"> {{ message }} </div> var app =
详解vue中v-bind:style效果的自定义指令

自定义指令 1.什么是自定义指令以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令. 2.自定义指令的语法全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时-- inserted: function (el) { // 聚焦元素 el.focus() } })
详解VueJs中的V-bind指令

引子 v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如:  <a v-bind:href="url"></a>  <a :href="url"></a> 一.概述 v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑
Vue条件循环判断+计算属性+绑定样式v-bind的实例

Vue.js条件与循环 1.条件判断 (1)v-if, <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> </template> </div> <script> new Vue({ el:'#app', data:{ seen:true,
在vue中v-bind使用三目运算符绑定class的实例

如图所示: 通过动态的切换isOk就可以达到切换class的效果,isOk可以为一个表达式如num>1,如果data中num大于1,则显示classA,否则显示classB 以上这篇在vue中v-bind使用三目运算符绑定class的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
一文读懂vue动态属性数据绑定（v-bind指令）

v-bind的基本用法一.本节说明前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二. 怎么做 ":"为v-bind的简写形式,也可称为语法糖三. 效果四. 深入在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定. 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态
一文读懂c++11 Lambda表达式

1.简介 1.1定义 C++11新增了很多特性,Lambda表达式(Lambda expression)就是其中之一,很多语言都提供了 Lambda 表达式,如 Python,Java ,C#等.本质上, Lambda 表达式是一个可调用的代码单元[1]^{[1]}[1].实际上是一个闭包(closure),类似于一个匿名函数,拥有捕获所在作用域中变量的能力,能够将函数做为对象一样使用,通常用来实现回调函数.代理等功能.Lambda表达式是函数式编程的基础,C++11引入了Lambda则弥补了C
一文读懂Android Kotlin的数据流

目录一.Android分层架构二.ViewModel + LiveData 2.1 LiveData 特性观察者的回调永远发生在主线程仅持有单个且最新数据自动取消订阅提供「可读可写」和「仅可读」两种方式配合 DataBinding 实现「双向绑定」 2.2 LiveData的缺陷 value 可以是 nullable 的传入正确的 lifecycleOwner 粘性事件默认不防抖 transformation 工作在主线程 2.3 LiveData 小结三.Flow 3.1
一文读懂ava中的Volatile关键字使用

在本文中,我们会介绍java中的一个关键字volatile. volatile的中文意思是易挥发的,不稳定的.那么在java中使用是什么意思呢? 我们知道,在java中,每个线程都会有个自己的内存空间,我们称之为working memory.这个空间会缓存一些变量的信息,从而提升程序的性能.当执行完某个操作之后,thread会将更新后的变量更新到主缓存中,以供其他线程读写. 因为变量存在working memory和main memory两个地方,那么就有可能出现不一致的情况. 那么我们就可以使
一文读懂JAVA中HttpURLConnection的用法

针对JDK中的URLConnection连接Servlet的问题,网上有虽然有所涉及,但是只是说明了某一个或几个问题,是以FAQ的方式来解决的,而且比较零散,现在对这个类的使用就本人在项目中的使用经验做如下总结: 1:> URL请求的类别: 分为二类,GET与POST请求.二者的区别在于: a:) get请求可以获取静态页面,也可以把参数放在URL字串后面,传递给servlet, b:) post与get的不同之处在于post的参数不是放在URL字串里面,而是放在http请求的正文内. 2:>
一文读懂c++之static关键字

一.静态变量与C语言一样,可以使用static说明自动变量.根据定义的位置不同,分为静态全局变量和静态局部变量. 全局变量是指在所有花括号之外声明的变量,其作用域范围是全局可见的,即在整个项目文件内都有效.使用static修饰的全局变量是静态全局变量,其作用域有所限制,仅在定义该变量的源文件内有效,项目中的其他源文件中不能使用它. 块内定义的变量是局部变量,从定义之处开始到本块结束处为止是局部变量的作用域.使用static修饰的局部变量是静态局部变量,即定义在块中的静态变量.静态局部变量具有局
一文读懂Java Iterator（迭代器）

Java Iterator(迭代器)不是一个集合,它是一种用于访问集合的方法,可用于迭代 ArrayList和HashSet等集合. Iterator 是 Java 迭代器最简单的实现,ListIterator 是 Collection API 中的接口, 它扩展了 Iterator 接口. 迭代器 it 的两个基本操作是 next .hasNext 和 remove. 调用 it.next() 会返回迭代器的下一个元素,并且更新迭代器的状态. 调用 it.hasNext() 用于检测集合中是否
一文读懂Python 枚举

enum 是一组绑定到唯一常数值的符号名称,并且具备可迭代性和可比较性的特性.我们可以使用 enum 创建具有良好定义的标识符,而不是直接使用魔法字符串或整数,也便于开发工程师的代码维护. 创建枚举我们可以使用 class 语法创建一个枚举类型,方便我们进行读写,另外,根据函数 API 的描述定义,我们可以创建一个 enum 的子类,如下: from enum import Enum class HttpStatus(Enum): OK = 200 BAD_REQUEST = 400 FORB
一文读懂python Scrapy爬虫框架

Scrapy是什么? 先看官网上的说明,http://scrapy-chs.readthedocs.io/zh_CN/latest/intro/overview.html Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架.可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的, 也可以应用在获取API所返回的数据(例如 Amazon Associates Web Services ) 或者通用的网络爬虫. S
一文读懂C++ 虚函数 virtual

探讨 C++ 虚函数 virtual 有无虚函数的对比 C++ 中的虚函数用于解决动态多态问题,虚函数的作用是允许在派生类中重新定义与积累同名的函数,并且可以通过基类指针或引用来访问基类和派生类中的同名函数. 首先写两个简单的类,类 B 继承自类 A,即 A 是基类,B 是派生类. class A{ public: void print(){ cout << "A" << endl; } }; class B : public A { public: void

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

v-bind的基本用法

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

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

v-bind绑定style属性

相关推荐

随机推荐