Vue.js：动态绑定CSS样式、指令v-if、v-else-if、v-show、v-for
学习Vue.js第五天
动态绑定CSS样式
- v-bind:class="{ active: isActive }"
- 官方文档地址:https://cn.vuejs.org/v2/guide/class-and-style.html
<div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC">
<span>示例一span>
div>
- 示例2
<button v-on:click="changeC=!changeC">colorbutton>
<button v-on:click="changeL=!changeL">lengthbutton>
<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">错误404p>
<p v-if="success">成功200p>
- v-else-if
- 如果有错误信息,成功信息是点不出来的,相反可以.
成功200
- v-show
- 它只是 display:none而已,不想v-if不会出现在文档里
<p v-show="error">错误404p>
<p v-show="success">成功200p>
- v-for
<b>names1b>
<ul>
<li v-for="name in names1">{{name}}li>
ul>
<b>names2b>
<ul>
<li v-for="name in names2">姓名:{{name.name}},年龄:{{name.age}}li>
ul>
- div同样可以遍历,但是遍历多次就渲染多少个div
- 可以用template,直接把div改成template这时候效果一样但不会渲染
全部代码
<html>
<head>
<meta charset="utf-8" />
<title>Vue.jstitle>
<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>示例1h2>
<div v-bind:class="{changeColor:changeC}" v-on:click="changeC=!changeC">
<span>示例一span>
div>
<h2>示例2h2>
<button v-on:click="changeC=!changeC">colorbutton>
<button v-on:click="changeL=!changeL">lengthbutton>
<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">错误404p>
<p v-show="success">成功200p>
<h2>v-for 循环h2>
<b>names1b>
<ul>
<li v-for="name in names1">{{name}}li>
ul>
<b>names2b>
<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>