學習Vue.js第五天
動態綁定CSS樣式
- v-bind:class="{ active: isActive }"
- 官方文檔地址:https://cn.vuejs.org/v2/guide/class-and-style.html
<!--綁定了changeColor樣式,changeC默認爲false,單擊變非-->
<div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC">
<span>示例一</span>
</div>
- 示例2
<button v-on:click="changeC=!changeC">color</button>
<button v-on:click="changeL=!changeL">length</button>
<div v-bind:class="compClasses">
<span>示例二</span>
</div>
Vue指令v-if
- v-if
<button v-on:click="error=!error">錯誤信息</button>
<button v-on:click="success=!success">成功信息</button>
<p v-if="error">錯誤404</p>
<p v-if="success">成功200</p>
- v-else-if
- 如果有錯誤信息,成功信息是點不出來的,相反可以.
<p v-else-if="success">成功200</p>
- v-show
- 它只是 display:none而已,不想v-if不會出現在文檔裏
<p v-show="error">錯誤404</p>
<p v-show="success">成功200</p>
- v-for
<b>names1</b>
<ul>
<li v-for="name in names1">{{name}}</li>
</ul>
<b>names2</b>
<ul>
<li v-for="name in names2">姓名:{{name.name}},年齡:{{name.age}}</li>
</ul>
- div同樣可以遍歷,但是遍歷多次就渲染多少個div
- 可以用template,直接把div改成template這時候效果一樣但不會渲染
全部代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
span {
background: hotpink;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.changeColor span {
background: green;
}
.changeLength span:after {
content: "length+";
margin-left: 10px;
}
</style>
</head>
<body>
<div id="vue-app">
<h2>示例1</h2>
<div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC">
<span>示例一</span>
</div>
<h2>示例2</h2>
<button v-on:click="changeC=!changeC">color</button>
<button v-on:click="changeL=!changeL">length</button>
<div v-bind:class="compClasses">
<span>示例二</span>
</div>
<h2>v-if條件</h2>
<button v-on:click="error=!error">錯誤信息</button>
<button v-on:click="success=!success">成功信息</button>
<p v-show="error">錯誤404</p>
<p v-show="success">成功200</p>
<h2>v-for 循環</h2>
<b>names1</b>
<ul>
<li v-for="name in names1">{{name}}</li>
</ul>
<b>names2</b>
<ul>
<li v-for="name in names2">姓名:{{name.name}},年齡:{{name.age}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el: "#vue-app",
data: {
changeC: false,
changeL: false,
error: false,
success: false,
names1: ["old monster", "zhangsan", "lisi", "wangwu"],
names2: [{
name: "xiaohong",
age: 18
},
{
name: "xiaoming",
age: 22
},
{
name: "laowang",
age: 44
}
]
},
methods: {
},
computed: {
compClasses: function() {
return {
changeColor: this.changeC,
changeLength: this.changeL
};
}
}
});
</script>
</html>