<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.js"></script>
<style>
.red {
color: blueviolet;
}
.thin {
font-weight: 200;
}
.ilalic {
font-style: italic;
}
active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<!--
不寫引號,會從vm裏面去找-->
<div id="app">
<!-- 1.css普通寫法 -->
<!-- <h1 class="active red">{{msg}}</h1> -->
<!--2.直接傳遞一個數組,這裏的class需要使用v-Bind做數據綁定 裏面要寫引號,不然會把它當做一個變量在vm裏面去找 -->
<!-- <h1 v-bind:class="['active','red']">{{msg}}</h1> -->
<!-- 3.在數組中使用三元表達式(麻煩) -->
<!-- <h1 v-bind:class="['active','red',flag?'thin':'']">這是一個標籤</h1> -->
<!-- 4.在數組中使用對象的形式代替三元表達式 -->
<!-- <h1 v-bind:class="['active','red',{'thin':flag}]">這是一個標籤</h1> -->
<!-- 5.直接使用對象 對象的屬性的類名,由於對象的屬性可帶引號也可不帶,所以這裏沒寫引號,屬性的值是一個標識符 -->
<!-- <h1 v-bind:class="{red:true,thin:true,ilalic:false}">這是一個標籤</h1> -->
<h1 v-bind:class="classObj">這是一個標籤</h1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
// msg:"我是一個標籤",
flag: true,
classObj:{red:true,thin:true,ilalic:false}
},
methods: {
}
})
</script>
</body>
</html>
Vue——07——使用樣式class
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
vue在history的路由模式下，刷新後界面報404
需要配置下nginx，位置在/conf/vhosts/*.conf，將當前目錄下的所有conf都修改一下最好 server { listen 80; server_name agwenb