vuejs基础-style样式
class样式和内联style样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.min.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">
<!--<h1 class="red thin">这是一个测试标签，看它的变化</h1>-->
<!--<h1 :class="['red','thin','italic']">这是一个测试标签，看它的变化</h1>-->
<!--<h1 :class="['red','thin',flag? 'active': '']">这是一个测试标签，看它的变化</h1>-->
<!--<h1 :class="['red','thin',{active:flag}]">这是一个测试标签，看它的变化</h1>-->
<!--<h1 :class="{red:true,thin:false,active:flag}">这是一个测试标签，看它的变化</h1>-->
<h1 style="color:'red'; 'font-weight':'100px'">这是一个测试标签，看它的变化</h1>
<!--<h1 :style="['classobj','classobj2']">这是一个测试标签，看它的变化</h1>
<h1 :style="{color:'red', 'font-weight':'100px'}">这是一个测试标签，看它的变化</h1>
<h1 :style="{color:'red', 'font-weight':'100px'}">这是一个测试标签，看它的变化</h1>-->
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
flag:true,
classobj:{red:true,thin:false,active:true},
classobj2:{red:false,thin:false,active:true}
},
methods:{}
});
</script>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读