3、v-bind以及class与style的绑定v-bind绑定活得属性 v-bind活属性示例1： v-bind活属性

v-bind绑定活得属性 v-bind活属性示例1：

<style>
.transRed{
background-color:red;}
</style>
**<div v-bind:class = "ClassName"></div>**
var app = new Vue({
el:
data:{
className:'transRed'},})

v-bind活属性，示例2：

<body>
    v-bind作用是绑定活得属性！！！<br>
    <div id="app">
    ** <a v-bind:href="url">我是百度</a>**
     <img :src="imgUrl" alt="">
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script>
         var app = new Vue ({
            el:'#app',
            data:{
               url:'http://baidu.com',                                     imgUrl:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
            }
        })
    </script>
</body>

绑定class

给v-bind：class设置一个对象，可以动态的切换class，值对应true，false。当class的表达式过长或逻辑复杂时，还可以绑定一个计算属性。

绑定class对象语法:对象的键是类名，值是布尔值。

<head>
<style>
        .divStyle{
            background-color: darkred;
            width:100px;
            height:100px;
        }
         .borderStyle{
            border:10 px solid blue;
            
        }
</style>
</head>
 <body>
<div>
绑定class对象语法：对象的键是类名，值是布尔值 <br>
<div :class = "{divStyle : isActive , borderStyle：isBorder }"> </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script>

        var app = new Vue({
            el:'#app',
            data:{
                isActive:true,
                isBorder:true,
            }
        })
    </script>
</body>

绑定class对象语法：对象的键是类名，值是布尔值

//“v-bind：”简写为“：”
//给div增加属性，就是class；
//class是个对象，上面style格式上的类名，就是对象的键，可以有多个，例如：

  .divStyle{
            background-color: darkred;
        }
   .borderStyle{
            background-color: blue;
        }

//对象的值就是布尔值，data里面的isActive，isBorder。例如：

var app = new Vue({
           el:'#app',
           data:{
               isActive:true,
               isBorder:true,
               isBack:true,
           }

做一个demo实例

需求，点击按钮，来回切换背景颜色为红，蓝。先做一个按钮,来回切换背景就是和上面的类一样，可以设置格式，则class=“”

 <input type="button" class="{btnBackground:isBack} v-on:click = "changeColor">

切换背景，可以设置背景的颜色

<style>
 .btnBackground{
            background-color: darkred;
               }
 
 </style>
 <script>
        //需求点击一个按钮，来回切换背景为红、蓝。
        var app = new Vue({
            el:'#app',
            data:{
                isActive:true,
                isBack: true,
            },
            methods:{
                changeColor:function(){
                    this.isBack = !this.isBack;
                }
            }
        })
    </script>

计算属性绑定class

当class表达式过长或者过于复杂时，还可以绑定一个计算属性

数组和对象混用

第一个成员是对象