vue---class和style绑定

Just do it…
:文章是供自己平时学习时用,相当于学习笔记,如有错误,欢迎指正~~

vue—class和style绑定

vue.js官网描述
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。
理解】Vue.js的核心是一个响应式的数据绑定系统,它允许我们在普通html模板中使用特殊的语法将DOM"绑定"到底层数据。被绑定的DOM将与数据保持同步,每当数据改动,相应的DOM视图也会更新。基于这种特性,通过Vue.js动态绑定class和style就变的简单了。
一、Vue–class绑定
方式(一):三目写法

<div :class="isActive ? 'red' :'yellow'">动态绑定class--三目写法</div>
data:{isActive:true}

渲染为:
在这里插入图片描述

方式(二):对象写法

 <div :class="classObj">动态绑定class--对象写法</div>
 data:{
     classObj:{
         a:true,
         b:false  //a b为class名字
     }
 }

渲染为:
在这里插入图片描述
方式(三):数组写法

<div :class="classArr">动态绑定class--数组绑定</div>
data:{
    classArr:['a', 'b']
}

渲染为:
在这里插入图片描述
完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{background-color:red}
        .yellow{background-color:yellow}
        .a{font-size:10px;font-weight: bold;}
        .b{background:brown}
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="box">
        <button @click="handleClick()">click</button>
        <div :class="isActive ? 'red' :'yellow'">动态绑定class--三目写法</div>
        <div :class="classObj">动态绑定class--对象写法</div>
        <div :class="classArr">动态绑定class--数组绑定</div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#box",
        data:{
            isActive:true,
            classObj:{   //对象写法
                a:true,
                b:false  //a b为class名字
            },
            classArr:['a', 'b']   //数组写法
        },
        methods:{
            handleClick(){
                this.isActive = !this.isActive
            }
        }
    })
</script>
</html>

效果:
vue---class和style绑定_第1张图片

二、Vue–style绑定
方式(一):三目写法

<div :style="'background:' + (isActive ? 'red' : 'yellow')">动态绑定style--三目运算</div>
 data:{
       isActive:true
 }

渲染为:
在这里插入图片描述
方式(二):对象写法

<div :style="classObj">动态绑定style--对象方法</div>
data:{
    classObj:{
               backgroundColor:'brown',   // 注意,像background-color这种带-的,必须写成驼峰命名法
    }     
}

渲染为:
在这里插入图片描述

你可能感兴趣的:(Vue)