WEB前端：vuejs全家桶（9）：属性绑定和属性的简写、class和style属性

本文链接：https://blog.csdn.net/weixin_43731793/article/details/102944302

2.1 属性绑定和属性的简写

文档：
https://cn.vuejs.org/v2/api/#v-bind

    v-bind 用于属性绑定， v-bind:属性=""

    属性的简写：
        v-bind:src="" 简写为 :src=""

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        window.onload = function() {
            new Vue({
                el: '.itany',
                data: {
                    url: 'https://www.baidu.com/img/bd_logo1.png?where=super',
                    width: '50px',
                    height: '50px'
                }
            });
        }
    </script>
</head>

<body>
    <div class="itany">
        <!-- <img v-bind:src="url"> -->
        <!-- <img :src="url"> -->
        <img :src="url" :windth="width" :height="height">
    </div>
</body>

</html>

2.2 class和style属性


    绑定class和style属性时语法比较复杂：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title>vue</title>
    <script>
        window.onload = function() {
            new Vue({
                el: '.itany',
                data: {
                    bb: 'aa',
                    dd: 'cc',
                    flag: true,
                    num: -2,
                    hello: {
                        aa: true,
                        cc: true
                    },
                    xx: {
                        color: 'blue',
                        fontSize: '30px'
                    },
                    yy: {
                        backgroundColor: '#ff7300'
                    }
                }
            });
        }
    </script>
    <style>
        .aa {
            color: red;
            font-size: 20px;
        }
        
        .cc {
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <div class="itany">
        <!-- <p class="aa">你好啊啊 ！</p> -->
        <!-- <p :class="aa">你好啊啊 ！</p> -->
        <!-- <p :class="aa">南京网博</p> -->
        <!-- 不可以，Vue的属性绑定时不能直接css样式 -->

        <!-- 方式1:变量形式 -->
        <!-- <p :class="bb">你好啊啊 ！</p> -->

        <!-- 方式2：数组形式，同时引用多个 -->
        <!-- <p :class="[bb,dd]">你好啊啊 ！</p> -->

        <!-- 方式3：json形式，常用！！！ -->
        <!-- <p :class="{aa:true,cc:flag}">你好啊啊 ！</p> -->
        <!-- <p :class="{aa:num>0}">你好啊啊 ！</p> -->

        <!-- 方式4：变量引用json形式 -->
        <!-- <p :class="hello">你好啊啊 ！</p> -->

        <!-- style属性 -->
        <p :class="[xx,yy]">你好啊啊 ！</p>

    </div>
</body>

</html>