Vue中v-bind的使用_v-bind怎么改字体大小-优快云博客

本文链接：https://blog.youkuaiyun.com/Angela_Connie/article/details/114273603

Vue中v-bind的使用

我们之前学到的指令主要作用是将值插入到模板的内容之中，但是除了内容需要动态来决定之外，某些属性我们也希望动态来绑定，这时，可以使用v-bind指令
v-bind指令的作用：动态绑定属性
缩写(简写，语法糖)：：(一个冒号)
v-bind绑定style 例如：(给h2标签的元素的颜色设置成红色，字体大小设置成50px)

<body>
    <div id="app">
		<h2 v-bind:style="{color: red,fontSize:50px}">{{message}}</h2>
		<!-- 简写方式（省略v-bind）<h2 :class="{color: red,fontSize:50px}">{{message}} --></h2>
		<!-- 注意用-连接的属性在vue中使用驼峰命名法 -->
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
            }
        })
    </script>
</body>

或者属性名也可以设置在变量里，例如：

<body>
    <div id="app">
		<h2 :style="{color: Rcolor,fontSize: fontsize}">{{message}}</h2>
		<!-- 注意用-连接的属性在vue中使用驼峰命名法 -->
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
                Rcolor: 'red',
                fontsize: '50px'
            }
        })
    </script>
</body>

运行结果如下：
在这里插入图片描述
5. v-bind绑定class 再例如：给h2标签添加名叫active的类

<style>
	.active{
		color: yellow;
		font-size: 100px;
	}
</style>
<body>
    <div id="app">
        <h2 :class="{active: true}">{{message}}</h2>//当active的值为true时，active类才有效
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "你好啊",
            }
        })
    </script>
</body>

运行结果如下：
在这里插入图片描述