Vue使用样式和内联样式
注意:1.Vue中使用样式,必须用v-on(缩写成:)绑定2.在Js中,对象(无序键值对)的类名单引号可以省略,但是属性名中带有连字符等其他特殊字符要用引号隔开,推荐全部都用引号,属性名(键值)必须使用单引号隔开。所以都用单引号不会出错。<!DOCTYPE html><html lang="en"><head
·
注意:
1.Vue中使用样式,必须用v-on(缩写成:)绑定
2.在Js中,对象(无序键值对)的类名单引号可以省略,但是属性名中带有连字符等其他特殊字符要用引号隔开,推荐全部都用引号,属性名(键值)必须使用单引号隔开。所以都用单引号不会出错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../lib/vue.js"></script>
<style>
.color{
color:cornflowerblue;
}
.thin{
font-weight: 200;
}
.italic{
font-style: italic;
/*意大利斜塔*/
}
.active{
letter-spacing: 0.5em;
/*设置中文字符串间距,英文的可用word-spacing*/
}
</style>
</head>
<body>
<div id="app">
<h3 class="color italic">陈小帅真的是有点帅的啊</h3>
<!--HTML的使用方式-->
<h3 :class="['color','thin']">陈小帅真的是有点帅的啊</h3>
<!--vue的使用方式,传递一个数组,一定要用单引号隔开。同时需要使用v-on绑定-->
<h3 :class="['color','thin',flag?'active':'']">陈小帅真的是有点帅的啊</h3>
<!--vue第二种使用方式,数组中使用三元表达式-->
<h3 :class="['color','thin',{'active':flag}]">陈小帅真的是有点帅的啊</h3>
<!--vue第三种使用方式,数组中使用对象替代三元表达式,通过键名作为判断的依据-->
<h3 :class="{'active':false,'color':flag,'italic':!flag}">陈小帅真的是有点帅的啊</h3>
<!--vue第四种用法,直接使用对象,v-on指令绑定的属性是类名,可以带引号也可省略,通过一个键作为标识符-->
</div>
<!--以上是在Vue中使用样式-->
<div id="app2">
<h3 :style="{color:'lightblue','font-weight':200}">陈小帅是真的长得有点帅的啊</h3>
<!--这里的对象都是无序键值对的集合,如果属性名中带有连字符等其他特殊字符要用引号隔开,推荐全部都用引号-->
<!--通过style直接书写样式-->
<h3 :style="styleObj">陈小帅是真的长得有点帅的啊</h3>
<!--将对象放入data中,然后定义-->
<h3 :style="[styleObj1,styleObj2]">陈小帅是真的长得有点帅的啊</h3>
<!--多个data对象-->
<!--以上内联样式-->
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
flag:true
},
methods:{}
});
var vm2 = new Vue({
el:'#app2',
data:{
styleObj1:{color:'lightblue','font-weight':200},
styleObj2:{'font-style': 'italic'}
},
methods:{}
});
</script>
</body>
</html>
效果:
更多推荐
已为社区贡献5条内容
所有评论(0)