vue 绑定class、v-bind:style(对象语法、数组语法)
绑定 HTML Class
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
内联样式在模板里
<div id="div1" :class="{active: isActive, 'text-danger': hasError}"></div>
<script type="text/javascript">
var vm1 = new Vue({
el: "#div1",
data: {
isActive: true,
hasError: true,
}
})
</script>
// 预览
<div id="div1" class="active text-danger"></div>
内联样式不在模板里
<div id="div2" :class="class_obj"></div>
<script type="text/javascript">
var vm2 = new Vue({
el: "#div2",
data: {
class_obj: {
isActive: true,
hasError: true,
}
}
})
</script>
————————————————
// 预览
<div id="div2" class="isActive hasError"></div>
绑定返回对象的计算属性
<div id="div3" v-bind:class="classObject"></div>
<script type="text/javascript">
var vm3 = new Vue({
el: "#div3",
data: {
isActive: true,
error: true
},
computed: {
classObject: function () {
return {
active: this.isActive && this.error,
'text-danger': this.error
}
}
}
})
</script>
————————————————
// 预览
<div id="div3" class="active text-danger"></div>
数组语法
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
class 列表
<div id="div4" v-bind:class="[activeClass, errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div4",
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
———————————————— // 预览 <div id="div4" class="active text-danger"></div>
class 列表使用三元表达式
如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div id="div5" v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div5",
data: {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>
———————————————— // 预览 <div id="div5" class="active text-danger"></div>
class 列表使用对象语法
<div id="div6" v-bind:class="[{ active: isActive }, errorClass]"></div>
<script type="text/javascript">
new Vue({
el: "#div6",
data: {
isActive: true,
errorClass: 'text-danger'
}
})
</script>
————————————————
// 预览
<div id="div6" class="active text-danger"></div>
class 综合练习
<style>
.red {
color: red;
} .thin {
font-weight: ;
} .italic {
font-style: italic;
} .active {
letter-spacing: .5em;
}
</style> <body>
<div id="app">
<h1 class="red thin">这是一个很大很大的H1，大到你无法想象！！！</h1> <!-- 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定 -->
<h1 :class="['thin', 'italic']">这是一个很大很大的H1，大到你无法想象！！！</h1> <!-- 在数组中使用三元表达式 -->
<h1 :class="['thin', 'italic', flag?'active':'']">这是一个很大很大的H1，大到你无法想象！！！</h1> <!-- 在数组中使用 对象来代替三元表达式，提高代码的可读性 -->
<h1 :class="['thin', 'italic', {'active':flag} ]">这是一个很大很大的H1，大到你无法想象！！！</h1> <!-- 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符 -->
<h1 :class="classObj">这是一个很大很大的H1，大到你无法想象！！！</h1> </div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
flag: true,
classObj: { red: true, thin: true, italic: false, active: false }
},
methods: {}
});
</script>
</body>
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表
<div id="div4" v-bind:style="[baseStyles, overridingStyles]">{{ msg }}</div>
<script type="text/javascript">
new Vue({
el: "#div4",
data: {
msg: "我是数组绑定方法",
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
}
})
</script>
vue 绑定class、v-bind:style(对象语法、数组语法)的更多相关文章
- 在vue中使用watch监听对象或数组
最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...
- Vue教程：Class 与 Style 绑定（四）
绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...
- NO.04--我的使用心得之使用vue绑定class名
今天聊一聊这个话题,其实方式有很多种,我今天介绍几种我使用到的,各位看官耐心看: 一.用 变量形式 绑定单个 Class 名 在 vue 中绑定单个 class 名还好说,直接写就可以了 <te ...
- 浏览器端-W3School-HTML：HTML DOM Style 对象
ylbtech-浏览器端-W3School-HTML:HTML DOM Style 对象 1.返回顶部 1. HTML DOM Style 对象 Style 对象 Style 对象代表一个单独的样式声 ...
- Vue.2.0.5-Class 与 Style 绑定
Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...
- vue - 绑定css、style
1.绑定html css1.1对象语法: 传给 v-bind:class 一个对象,以动态地切换 class <div v-bind:class="{ active: isActive ...
- void bind(String sName,Object object);――绑定：把名称同对象关联的过程
void bind(String sName,Object object);――绑定:把名称同对象关联的过程 void rebind(String sName,Object object);――重新绑 ...
- ch5-Class 与 Style 绑定(v-bind:class v-bind:style)
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式. 因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串. 不过,字符串拼接麻烦又易错.因此,在 v-b ...
- vue 绑定样式的几种方式
vue 绑定样式 对象语法 1.v-bind:class设置一个对象,动态切换class <div :class="{'active':isActive}">xxx&l ...
随机推荐
- java 统计素数个数问题
题目:判断101-200之间有多少个素数,并输出所有素数. 程序分析:判断素数的方法:用一个数分别去除2到sqrt(这个数),如果能被整除,则表明此数不是素数,反之是素数. package Study ...
- [转帖]$PWD 和 $(pwd)
$PWD 和 $(pwd) https://blog.csdn.net/shaojwa/article/details/51894980 细节决定成败. 注意两个效果一样,但是注意大小写,PWD是 ...
- Python环境配置问题及解决办法
Windows下用pip安装包时出现"error: Microsoft Visual C++ 9.0 is required"错误 error: Microsoft Visual ...
- Python-RabbitMQ-topic（细致消息过滤的广播模式）
生产者:topic_publiser.py import pika,sys connection = pika.BlockingConnection(pika.ConnectionParameters ...
- Docker 容器简介与部署
关于Docker容器技术 参考文献:<docker 从入门到精通> Docker容器简介 Docker的构想是要实现 "Build,Ship and Run Any App,An ...
- js创建jsonArray传输至后台及后台解析
//产品清单 //产品数量长度 var cnbvLength = FieldCount9 + 1; var arrayList=[]; for(var i = 0; i < cnbvLength ...
- 关于redis的几件小事(三)redis的数据类型与使用场景
1.string 这是最基本的类型了,就是普通的set和get,做简单的kv缓存. 2.hash 这个是类似map的一种结构,这个一般就是可以将结构化的数据,比如一个对象(前提是这个对象没嵌套其他的对 ...
- JQuery——关于CDN（内容分发网络）
替代方案 如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它. Staticfile CDN.百度.又拍云.新浪.谷歌和微软的服务器都存有 jQuery . 如果你的 ...
- dubbo学习笔记一（服务注册）
相关的资料 官方文档 官方博客 项目结构 项目说明 [lesson1-config-api] 是一个接口工程,编译后是jar包,被其他工程依赖 [lesson1-config-2-properties ...
- Django的MySQL Driver配置
PEP 249规定了Python的数据库API.MySQL主要有三种API实现: MySQLdb 是Andy Dustman开发的.使用原生代码/C语言绑定的驱动,它已经开发了数十年. mysqlcl ...