详解vue动态属性数据绑定

发布时间:2020-07-20 17:17:41 作者:小猪
来源:亿速云 阅读:1210

小编这次要给大家分享的是详解vue动态属性数据绑定,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

v-bind的基本用法

一、本节说明

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

二、 怎么做

详解vue动态属性数据绑定

三、 效果

详解vue动态属性数据绑定

四、 深入

错误的写法

<a v-bind:href="'toutiao'" rel="external nofollow" >今日头条(v-bind:href)</a>

详解vue动态属性数据绑定

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

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

一、本节说明

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

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

<h3 v-bind:class="{css类名1: true|false, css类名2: true|false}" class="css类名3">{{message}}</h3>

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

二、 怎么做

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

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

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

详解vue动态属性数据绑定

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

详解vue动态属性数据绑定

三、 效果

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

详解vue动态属性数据绑定

四、 深入

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

<button @click="changeColor">换颜色</button>
changeColor(){
  this.isBlue = !this.isBlue
  this.isRed = !this.isRed
}

最终效果

详解vue动态属性数据绑定

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

一、本节说明

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

<div :class="['css类名1','css类名2']">数组语法</div>
<div :class="['css类名1', 'css类名2', {css类名3: true|false}]"> 数组中嵌套对象</div>

二、 怎么做

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

详解vue动态属性数据绑定

下面是具体的实现

详解vue动态属性数据绑定

三、 效果

详解vue动态属性数据绑定

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

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

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

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

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

v-bind绑定style属性

一、本节说明

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

注意:

二、 怎么做

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

<h3 :>这是一个红色的H2</h3>

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

详解vue动态属性数据绑定

三、 效果

详解vue动态属性数据绑定

四、 深入

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

data: {
 style1: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
 style2: { font-style: 'italic' }
}

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

<h3 :>这是一个蓝色的斜体的h3</h3>

看完这篇关于详解vue动态属性数据绑定的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。

推荐阅读:
  1. 详解如何理解vue的key属性
  2. vue+iview动态渲染表格详解

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue ue

上一篇:Unity SLua 如何调用Unity中C#方法

下一篇:.NET实现IIS效能级别的HTTP服务

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》