Vue语法基础三(样式绑定)
Vue绑定样式有绑定class和绑定style两种方式,这两种方式都有对象语法和数组语法。
一、class绑定
1.1 对象语法
使用js对象的方式,也就是key-value的方式,给元素的class属性绑定样式,其中key是样式,value控制key样式是否有效,value是个布尔值。
<style> div div { width: 100px; height: 100px; } .active { background-color: green; } </style> <div id="app"> <div :class="{active: isActive}"></div> <button @click="chgStyle">切换背景色</button> </div> <script> let vm = new Vue({ el: '#app', data: { isActive: true, }, methods: { chgStyle() { this.isActive = !this.isActive; } } }) </script>
js对象中可以放置多个样式,如下:
<style> div div { width: 100px; height: 100px; } .active { background-color: green; } .border { border: 2px solid red; } </style> <div id="app"> <div :class="{active: isActive, border: hasBorder}"></div> <button @click="chgStyle">切换背景色</button> <button @click="chgBorder">切换边框</button> </div> <script> let vm = new Vue({ el: '#app', data: { isActive: true, hasBorder: false }, methods: { chgStyle() { this.isActive = !this.isActive; }, chgBorder() { this.hasBorder = !this.hasBorder } } }) </script>
这样就可以同时控制两个样式的切换,如果有更多样式,同理。
1.2 数组语法
给class属性绑定的值也可以是个数组,数组中的元素既可以是data中的变量,也可以直接放类名(字符串形式)。
<style> div div { width: 100px; height: 100px; } .color { background-color: green; } .border { border: 1px solid red; } </style> <div id="app"> <div :class="[bgClass, 'border']">class数组语法</div> <button @click="handle">切换</button> </div> <script> let vm = new Vue({ el: '#app', data: { bgClass: 'color', }, methods: { handle() { this.bgClass = '' } } }) </script>
点击切换按钮,可以将背景样式置空。
二、style绑定
2.1 对象语法
绑定style时的对象语法,跟内联样式的写法一样,只是css值部分采用了变量来替代。对照绑定class时的对象语法,那是定义好一个内部样式,用value部分来控制内部样式是否有效。
<div id="app"> <div :style="{color: color, fontSize: fontSize + 'px'}">style对象语法</div> <button @click="bigger">字号变大</button> </div> <script> let vm = new Vue({ el: '#app', data: { color: 'red', fontSize: 10 }, methods: { bigger() { this.fontSize = this.fontSize + 5 } } }) </script>
2.2 数组语法
style的数组语法跟class的数组语法一样,都是从内部样式表中引入一个或者多个样式,并且满足css的样式层叠规则。
<div id="app"> <div :style="[baseStyle, overrideStyle]">style数组语法</div> <button @click="handle">切换</button> </div> <script> let vm = new Vue({ el: '#app', data: { baseStyle: { width: '200px', height: '200px', border: '1px red solid' }, overrideStyle: { width: '400px', border: '2px blue dotted' } }, methods: { handle() { this.overrideStyle = '' } } }) </script>
因为发生了样式层叠,起先表现为一个宽400高200的虚线蓝框,当我们点击切换按钮时,overrideStyle被置空,这时候只有baseStyle样式生效,就变成了一个宽200高200的实线红框。
总结一下:
class的对象语法和style的对象语法不同,前者用布尔值控制样式是否生效,后者跟css写法一样。
class的数据语法和style的数组语法相同,都是引入多个内部样式。
PS:本系列文章同步更新于资浅码农的公众号
原文地址:https://www.cnblogs.com/africancu/p/13301182.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 排序算法之希尔排序
- 排序算法之快速排序
- 干货 | Oracle数据库操作命令大全,满满的案例供你理解,收藏!
- 【2万字长文】深入浅出主流的几款小程序跨端框架原理
- 关于动态规划的练习题
- Linux笔记
- 使用OpenCV和Python计算视频中的总帧数
- HDOJ 1087 (JAVA实现 最大上升子序列和dp)
- JavaSE笔记
- [译]Gas 优化 - 如何优化存储
- Codeforces Round #613 (Div. 2) C. Fadi and LCM
- N皇后问题(DFS)
- [译]区块链民主 - 如何开发通过投票运行的合约
- java安全编码指南之:异常处理
- java安全编码指南之:死锁dead lock