【Vue.js學習筆記】6：動態繫結CSS樣式,條件渲染和v-show
阿新 • • 發佈：2018-12-26
動態繫結CSS樣式
這部分涉及官方文件中的Class與Style繫結。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href= app6.js
// 例項化vue物件
new Vue({
el: "#vue-app",
data: {
changeColor: false,
changeLength: false
},
methods: {},
computed: {
twoClasses: function () {
return {
changeColor: this.changeColor,
changeLength: this.changeLength
}
}
}
});
style2.css
span {
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.changeColor span {
background: green;
}
.changeLength span:after {
content: "length"; /*content用於插入內容,前面after表示將插入在後面*/
margin-left: 10px;
}
執行結果
兩個按鈕都點選了一下後的結果：
條件渲染和v-show
條件渲染即使用v-if來控制DOM元素的存在與否，在官方文件中這裡。
index.html
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style2.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--這個vue-app是根容器-->
<div id="vue-app">
<h4>通過點選下面的button來取反error和success的bool值</h4>
<button v-on:click="error=!error">Toggle Error</button>
<button v-on:click="success=!success">Toggle Success</button>
<hr>
<h4>下面是當error為真時顯示第一個404的,當error為假且success為真時顯示第二個</h4>
<p v-if="error">網路連線錯誤:404</p>
<p v-else-if="success">網路連線成功:200</p>
<hr>
<h4>下面是v-show的使用,v-show當裡面為true時正常顯示,為false時display(但這個DOM還是存在的)</h4>
<p v-show="error">error為真</p>
<p v-show="success">success為真</p>
</div>
<script src="app7.js"></script>
</body>
</html>
app7.js
// 例項化vue物件
new Vue({
el: "#vue-app",
data: {
error: false,
success: false
}
});
執行結果
兩個button都點選一次，以將它們都置為true：
再點選一次左邊的button，以將error置回false：
