Vue 属性与样式

属性绑定

v-bind

　　如果想要操纵被挂载标签的属性，则使用v-bind进行属性绑定，当然也可以进行简写，简写形式为:。

　　需要注意的有以下两点：

如果包裹属性的是双引号，它将访问Vue实例尝试获取该属性

如果包裹属性的是单引号外层再包裹上双引号，则代表这就是一个普通的字符串

　　单纯双引号，将会访问Vue实例尝试获取该变量：

<!-- 结果:<p s1="yunya">属性绑定</p>  -->

<body>
    <div id="app">
        <p :s1="attr">属性绑定</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
            attr: "yunya",
            }
        })
    </script>
</body>

　　如果添加单引号，则会被当作普通字符串：

<!-- 结果:<p s1="attr">属性绑定</p>  -->

<body>
    <div id="app">
        <p :s1="'attr'">属性绑定</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
            attr: "yunya",
            }
        })
    </script>
</body>

样式操作

class对象绑定

　　使用class属性操纵样式是一种非常常见的操作。

　　对象形式进行绑定时，当为false则代表不应用该属性，反之亦然。

　　除此之外，还可以使用正常的class=类名来定制不变的类。

<style>
    .italic {
        font-style: italic;
    }

    .red {
        color: red;
    }
    .show{
        display: unset;
    }
</style>

<body>
    <div id="app">
        <p :class="{italic:status,red:status}" class="show">属性绑定</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                status: true,
            }
        })
    </script>
</body>

class数组绑定

　　除开使用对象形式为class属性赋予多个值外，也可以使用数组形式。

　　但是使用场景一般较少，语法格式如下：

<p :class=[变量1,变量2,"字符串3"]>内容</p>
<!-- 注意，当数组内的元素没有加引号是会认为是一个变量，会去Vue实例中寻找 -->
<!-- 如果数组内的元素加上引号，则被认位是一个字符串 -->

<style>
    .italic {
        font-style: italic;
    }

    .red {
        color: red;
    }
    .show{
        display: unset;
    }
</style>

<body>
    <div id="app">
        <p :class=[s1,s2,'show']>属性绑定</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                s1: "italic",
                s2: "red",
            }
        })
    </script>
</body>

style对象绑定

　　我们可以通过v-bind与对象，动态绑定标签的style属性。

　　它有两种书写style的方式，一种是驼峰式，一种是通过-来进行链接。

　　注意它的格式是这样的：

<p :style={color:"red",fontSize:"12px",backgroundColor:bgColor}>内容</p>
<!-- 注意!最后的background没有添加单引号，这使得bgColor会当作变量去Vue实例中获取 -->

　　示例如下：

<body>
    <div id="app">
        <p :style={fontStyle:"italic",color:"red",display:status}>属性绑定</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                status:"unset",
            }
        })
    </script>
</body>

　　最终结果：

element.style {
    font-style: italic;
    color: red;
    display: unset;
}

style数组绑定

　　除开可以使用对象语法绑定style属性，也可以通过数组语法进行绑定。

　　数组中的元素必需是能够从Vue实例中获取到的数据。

<body>
    <div id="app">
        <p :style=[fontStyle,ColorStyle]>属性绑定</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                fontStyle: {"font-size": "24px", "font-style": "italic"},
                ColorStyle: {"color": "red", "background-color": "green"},
            }
        })
    </script>
</body>