v-bind绑定事件

介绍：

  v-bind指令用于响应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。

使用方法：

  一.基本用法：

 //正常写法
<a v-bind:href="url"></a>

//简写方式 用 “：” 代替  v-bind:
<a :href="url">转跳</a>

  二.语法：

    1.把样式属性改成对象属性： 
            1.要用大括号包裹起来；
            2. 把样式转换成属性值，用引号引起来；
            3.把分号改成逗号；
            4.对象要用驼峰命名法 ;

<div id="app">

   <!--    正常写法   -->
<div style="color: red; font-size: 24px;"></div>

  <!-- 代表样式color没有写死，而是根据变量color的值来，变量color是什么，样式color就是什么。 -->
<div :style="{color:color,floorSize:floorSize}">div2</div>

</div>

    <script>
        new Vue({
            el: "#app",
            data: {
                color: 'red',
                fontSize: '24px',
          },
   </script> 

   也可以直接绑定数据里的一个对象：

<div id="app">

   <!--    正常写法   -->
<div style="color: red; font-size: 24px;"></div>

  <!-- 代表样式color没有写死，而是根据变量color的值来，变量color是什么，样式color就是什么。 -->
<div :style="stylee">div2</div>

</div>

    <script>
        new Vue({
            el: "#app",
            data: {
              stylee:{
                color: 'red',
                fontSize: '24px',
             }
          },
   </script> 

2.可以控制属性名添加

  css代码：

        .box {
            width: 300px;
            height: 300px;
            border: 5px solid #000;
        }
        
        .bg {
            background-color: pink;
        }

 HTML代码： 

<div id="app">
 
        <!-- 可以控制属性名添加 -->
        <div class="box" :class="{bg:isBg}"></div>
         
        <button @click="beiji">点击换背景</button>

    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
              //  true 添加   false 不添加
                isBg: false,
            },
            // 事件
            methods: {
                beiji() {
                    if (this.isBg == false) {
                        this.isBg = true;
                    } else {
                        this.isBg = false;
                    }
                }
            },
        })
    </script>

   有多个class可以用对象

CSS代码：

.box{
    border:1px dashed #f0f;
}
.textColor{
    color:#f00;
    background-color:#eef;
}
.textSize{
    font-size:30px;
    font-weight:bold;
}

 HTML代码：

<ul class="box" :class="cs">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>


<script>
 new Vue({
    el:‘.box‘,
    data:{
        cs:{
        textColor:false,
        textSize:true,
        }
    }
})
</script>