- <div :style="{'min-height': size +'px'}">
- </div>
- <div :style="[{'min-height': size +'px'},{color:'red'}]">
- </div>
- <div :style="{'opacity': value ? 0.5 : 1 }">
- </div>
通过 className 改变样式
- <div class="static"
- v-bind:class="{ active: isActive,'text-danger': hasError }">
- </div>
- <script>
- data: {
- isActive: true,
- hasError: false
- }
- </script>
- <style>
- .active{
- ...
- }
- .text-danger{
- ...
- }
- </style>
PS: 下面看下 vue 的一些样式 (class/style) 绑定
样式有两种: class,style
class
1, 对象语法
1传给 :class 一个对象
比如:
<div :class="{ active : isActive}"></div>
在这里, isActive 的真值决定 active 这个样式是否显示
2传给 :class 一个对象变量
再比如, 可以直接绑定一个对象
- <div :class = "duixiang"></div>
- export default{
- data(){
- return{
- duixiang :{
- active : true
- }
- }
- }
- }
3在2的基础上, 把这个对象变量放到 computed 计算属性里
- data: {
- isActive: true,
- error: null
- },
- computed: {
- classObject: function () {
- return {
- active: this.isActive && !this.error,
- 'text-danger': this.error && this.error.type === 'fatal',
- }
- }
- }
2, 数组语法
传给 :class 一个数组(数组里面是变量名, 然后具体变量名所指的内容写到 data 里)
- <div :class = "[ n , i]"> </div>
- export default{
- data(){
- return{
- n : 'active',
- i : 'text-danger',
- }
- }
- }
上面的代码在最后会宣传成为 < div class = "active text-anger"></div>
style
1, 对象语法
1传给 :style 一个对象(这个对象是个 JavaScript 对象). 记住! CSS 属性名可以用驼峰式命名
- <div :style = "{ color : activeColor , fontSize : fontSize +'px'}"></div>
- // 然后在 data 里面写明, 冒号后边的这个变量的实际内容, 如果是单位, 像 px 这种就直接用字符串引着就行了
- data: {
- activeColor: 'red',
- fontSize: 30
- }
2传给 :style 一个对象变量.
- <div v-bind:style="styleObject"></div>
- // 然后在 data 声明这个对象变量是指代一个怎样具体的对象
- data: {
- styleObject: {
- color: 'red',
- fontSize: '13px'
- }
- }
同样的, 对象语法常常结合返回对象的计算属性使用.
总结
来源: https://www.jb51.net/article/149787.htm