vue v-bind以及class与style的绑定

v-bind

作用:绑定活的属性
链接的 href 属性和图片的 src 属性都被动态设置了，当数据变化时，就会重新渲
染

var app = new Vue({
            el: '#app',
            data: {
                url: "https://www.baidu.com/",
                imgUrl: "https://www.baidu.com/img/bd_logo1.png"
            }
        })

对象语法绑定 class

<style>
        .divstyle {
            background-color: red;
            width: 100px;
            height: 100px;
        }

        .borderStyle {
            border: 3px solid blue;
        }

        .btnBackground {
            background-color: darkred;
        }
        
    </style>
<div id="app">
        绑定class对象与方法: 对象的键是类名，值是布尔值<br>
        <div :class="{divstyle : isActive,borderStyle:isBorder}"></div>
        <hr>
        <input type="button" value="点击切换颜色" :class={btnBackground:isback} v-on:click="changeColor">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        //需求：点击一个按钮，来回切换背景颜色为红，蓝
        var app = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isBorder: true,
                isback: true
            },
            methods: {
                changeColor: function () {
                    this.isback = !this.isback
                }
            }
        })
    </script>

image.png

数组语法

当需要应用多个 class 时， 可以使用数组语法 ， 给：class 绑定一个数组，应用一个 class
列表：数组成员直接对应className--类名

···
<div id="app">
绑定class数组方法:

<div :class="[activeClass,errorClass]" style="color: white">我是数组绑定class</div>
</div>
<script>
//需求：点击一个按钮，来回切换背景颜色为红，蓝
var app = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'error'
}
})
</script>
···

数组和对象语法混用

数组和对象混用,第一个成员是对象，第二个成员是数组成员

<div id="app">
        数组和对象混用,第一个成员是对象，第二个成员是数组成员
        <div :class="[{active : isActive},errorClass]"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        //需求：点击一个按钮，来回切换背景颜色为红，蓝
        var app = new Vue({
            el: '#app',
            data: {
                isActive: true,
                errorClass: 'error'
            }
        })
    </script>

image.png

在组件上使用： 暂时不考虑--挖坑

绑定内联样式

绑定内联样式：键代表style的属性值，值就代表属性对应的值

切记： VUE中只要是大写字母，都会给你转换成-加小写
fontSize font-size

    <div id="app">
        <div v-bind:style="{'color':color,'font-size':fontSize+'px'}">
            hello,我是jakeyi
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                color: 'red',
                fontSize: 18
            }
        })
    </script>

内联样式的数组形式

<div v-bind:style="[styleA,styleB]">
            大家看看我吧
        </div>

写出本课中v-bind的作用，并分别写出v-bind的变量语法，数组语法，对象语法

写出本课中v-bind的作用，并分别写出v-bind的变量语法，数组语法，对象语法