vue html绑定数组,VueJs Class 与 Style 绑定数组语法

应用介绍

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

渲染为：

如果你也想根据条件切换列表中的 class，可以用三元表达式：

这样写将始终添加 errorClass，但是只有在 isActive 是 truthy[1] 时才添加 activeClass。

不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

演示案例：

Class 与 Style 绑定->绑定HTML CLASS 对象语法

activeClassOne

activeClassTwo

activeClassThree

var app = new Vue({

el: '#app',

data: {

activeClass: 'active',

errorClass: 'text-danger',

isActive: true,

}

});

.static{

color: #333;

padding: 0.5rem;

margin: 0.1rem;

}

.text-danger{

color: #ff3b1d;

}

.active{

background:#f5f5f5;

}

vue html绑定数组,VueJs Class 与 Style 绑定数组语法相关推荐

Class与Style绑定
本文主要介绍如何使用Vue来绑定操作元素的class列表和内联样式(style属性). 因为class和style都是属性,所以通过v-bind命令来处理它们:只需要通过表达式计算出结果即可,不过字符 ...
Vue.js Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 ...
Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
VUE基本使用---安装、开始使用介绍、Vue实例、模板语法、计算属性和侦听器、class与style绑定
原文在我的博客:https://www.liboer.top/articles/detail/vue-BasedUse/ 文章目录 VUE.js 基础安装 CDN 下载安装命令行工具(CLI脚手 ...
vue清除绑定的class_vue 的 class 和 style 绑定的方法【05】
学习要点:1.绑定 class 2.绑定 style 本节课我们来开始学习 Vue 的 class 和 style 绑定的方法. 一．绑定 class 1. v-bind:class 不但可以设置 c ...
6.Vue Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易 ...
Vue基础之Class和Style绑定
既然v-bind可以动态绑定标签的属性,那么也可以用v-bind来处理class和style,只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 ...
Vue中计算属性与class,style绑定
var vm=new Vue({ el:'#app', data:{ a:2, }, computed:{ //这里的b是计算属性:默认getter b:{ get:function(){ retur ...
vue Class 与 Style 绑定
1. Class 绑定 1.1 对象语法普通对象单个类 <div v-bind:class="{ active: isActive }"></div> ...

vue html绑定数组,VueJs Class 与 Style 绑定数组语法

vue html绑定数组,VueJs Class 与 Style 绑定数组语法相关推荐

最新文章

热门文章

vue html绑定数组,VueJs Class 与 Style 绑定 数组语法

vue html绑定数组,VueJs Class 与 Style 绑定 数组语法相关推荐

最新文章

热门文章

vue html绑定数组,VueJs Class 与 Style 绑定数组语法

vue html绑定数组,VueJs Class 与 Style 绑定数组语法相关推荐