[vue]v-bind: sytle/class-bind&属性值绑定

v-bind

- style绑定
- class绑定
- 属性值绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind:</title>
    <style>
        .x {background: blue}
        .y {font-size: 30px}
        .z {color: pink}
    </style>
</head>
<body>
<div id="app">
    <h1>bind: class</h1>
    <div class="x" :class="[class1,class2,{z:true}]">maomao</div>
    <h1>bind: style</h1>
    <p :style="[style1,style2,{fontSize:'30px'}]">have a test p</p>

    <p style="background-color:lavenderblush;">hello world</p>
    <p :style="[style0,]">hello world</p>

    <h2>属性值: 链接/图片</h2>
    <a :href="baiduUrl">baidu.com</a>
    <img :src="imageUrl" alt="">
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: false,

            //属性绑定
            baiduUrl: 'https://www.baidu.com',
            imageUrl: 'http://t.cn/R3GPvKW',

            //bind-style
            style0: {color: 'lavender',},
            style1: {background: 'pink',},
            style2: {color: 'white',},

            // bind-class
            class1: 'x',
            class2: 'y',
        }
    })
</script>
</body>
</html>