版权声明：本文为博主原创文章，转载请注明出处 https://blog.csdn.net/qq_34160679/article/details/88180045
Vue Html标签绑定 css 样式
- 外联式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<!-- 第一种方式 直接使用数组，将类名加 '',以字符串进行设置-->
<h2 :class="['red','thin']">Hello World</h2>
<!-- 第二种方式： 可以看到 active 使用了 对象来表示，并且使用了三元表达式（flag? 'active':'' ）来表示是否有这个属性，
这个flag 是没有加入'' 表示的是Vue实例中data 中的数据-->
<h2 :class="['red','thin',{'active':flag}]">Hello World</h2>
<!-- 第三种方式：全部使用 对象, 当v-bind 绑定的是对象的时候，属性名可以不带引号-->
<h2 :class="{red:true, thin:true, active:flag}">Hello World</h2>
<h2 :class="classSettting">Hello World</h2>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: true,
classSettting: {
red: true,
thin: true,
active: true
},
},
methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法
}
})
</script>
</html>
-
内联式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3 :style="{color:'red', 'font-size': '100px'}">内联式 Hello World</h3> <h3 :style="style1">内联式 Hello World</h3> <h3 :style="[style1,style2]">内联式 Hello World</h3> </div> </body> <script> var vm = new Vue({ el: "#app", data: { style1: { color: 'red', }, style2: { 'font-size': '100px', }, }, methods: { // 这个methods 属性中定义了当前Vue 实例中使用到的方法 } }) </script> </html>