VUE v-bind绑定class和style
2024-09-04 11:07:26
1、绑定class
（1）对象语法
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<div class="static" :class="{'active':isActive,error:isError}">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isActive: true,
isError: true
}
});
</script>
</body> </html>
对象可以传入多个属性，：class可以与普通的class共存。
（2）数组语法
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<div class="static" :class="[activeCls,errorCls]">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
activeCls: 'active',
errorCls: 'error'
}
});
</script>
</body> </html>
2、绑定内联样式
v-bind:style 给元素绑定内联样式，也有对象和数组语法写法。由于直接写一长串样式不便于阅读和维护，所以一般写在data或者computed里。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>vue示例</title>
</head> <body>
<div id="app">
<div :style="styles">
123
</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
styles: {
color: 'red',
fontSize: '14px'
}
}
});
</script>
</body> </html>
使用;style时vuejs会自动添加前缀。
最新文章
- Spring Mock
- ubuntu下安装chrome
- Permutations II 再分析
- iOS 获取版本号（Swift和OC两种）
- dotfiles管理
- 安装SQL Server 2014
- 04.spring-data-redis与Jedis整合使用
- Android Timer用法
- 简单高效读写修改整个文本Slurp
- 《30天自制操作系统》读书笔记(5) GDT&IDT
- ueditor富文本编辑的使用方法
- Unable to boot : please use a kernel appropriate for your cpu
- C++编程命名规范
- md5两次加密
- Mapreduce概述和WordCount程序
- Linux df -h空间显示不正确
- java为什么用咖啡?
- linq 分组取各组最大值
- HTTP协议学习笔记（二）
- VBScript操作SFTP