vue中class样式与内联样式的绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue样式</title>
<script src="../lib/vue.js"></script>
<style>
.red{
background-color:red;
}
.color{
color: green;
}
</style>
</head>
<body>
<div class="app">
<h1 :class="['red','color']">我是一个样式</h1>
<!-- 注意需要使用v-bind进行属性绑定 -->
<h1 :class="[flag?'red':'']">我是一个样式</h1>
<!-- 使用三元表达式进行样式设定 -->
<h1 :class="[{'color':flag}]">我是一个样式</h1>
<!-- 使用一个对象代替三元表达式，增加代码的可读性 -->
<h1 :class="[{'red':true,'color':true}]">我是一个样式</h1>
<!-- 直接使用对象进行样式设定 -->
<h1 :class="obj">我是一个样式</h1>
<!-- 直接在vm对象中读取样式数据 -->
<!-- *************************以上是通过class来绑定样式***************************** -->
<!-- *************************以下是通过内联样式style来绑定样式***************************** -->
<h1 :style="{color:'gray','font-weight':100}">我是一个样式</h1>
<!-- 注意当属性名称中含有-时，需要加单引号 -->
<h1 :style="obj2">我是一个样式</h1>
<!-- 直接使用data中的样式对象设定 -->
<h1 :style="[obj2,obj3]">我是一个样式</h1>
<!-- 以数组的形式将多个样式对象添加到页面中 -->
</div>
<script>
var vm = new Vue({
el:'.app',
data:{
flag:true,
obj:{'red':true,'color':true},
obj2:{color:'gray','font-weight':100},
obj3:{'font-style':'italic'}
}
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
