1.v-for
自动遍历渲染相对应的数组内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <div id="app">
<div :key="item.id" v-for="(item,index) in fruit">{{item.name}}</div>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
fruit: [{
name: 'apple',
id: 1,
},{
name: 'banana',
id: 2,
},{
name: 'pear',
id: 3,
}]
},
methods: {
}
})
</script>
|
tips：注意这里记得使用v-bind：key=’id’**或者：key=’id’**来提高vue渲染器的性能，但是对于实际开发没有任何影响
2.v-once
被修饰的html标签中的mustache语法不会再因为变量内容修改而被修改，优点是可以提高网页性能
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <div id="app">
<div>{{message}}</div>
<div v-once>{{message}}</div>
<button v-on:click="click">修改</button>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '修改前是阴天',
},
methods: {
click: function () {
this.message = '修改后是晴天';
},
}
})
</script>
|
3.v-text和v-html
v-text跟原生js的**ele.innerText()**有类似的意思
v-html和原生js的**ele.innerHTML()**有类似的意思
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <div id="app">
<div>{{message}}你好帅！</div>
<div v-text="message">你好帅！</div>
<div v-html="url"></div>
<a href=""></a>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好二蛋！',
url: '<a href="#">你好二蛋！</a>'
},
methods: {
}
})
</script>
|
4.v-pre
让被修饰的标签中的mustache语法失效，从而直接显示双大括号
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="app">
<div>{{message}}</div>
<div v-pre>{{message}}</div>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: 123,
},
methods: {
}
})
</script>
|
5.v-choak（解决闪动问题）
更推荐使用v-text语法
vue解析之前，div中有一个属性v-cloak
vue解析之后，div中的v-cloak属性被删除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<style>
[v-cloak] {
display: none;
}
</style>
<div id="app">
<h2 v-cloak>{{message}}</h2>
</div>
<script>
setTimeout(function () {
let app = new Vue({
el: '#app',
data: {
message: '你好二蛋！',
},
methods: {
}
})
},2000)
</script>
|
6.v-show
决定元素是否显示出来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div id="app">
<div class="pink box"></div>
<div class="lightBlue box" v-show="isShow"></div>
<button @click="showHandle">显示/隐藏</button>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
isShow: true,
},
methods: {
showHandle: function (){
this.isShow = !this.isShow;
}
}
})
</script>
|
7.v-if & v-else-if & v-else
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="app">
<div v-if="msg>90">优秀</div>
<div v-else-if="msg<=90&&msg>80">良好</div>
<div v-else-if="msg<=80&&msg>70">及格</div>
<div v-else="msg<=70">不及格</div>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
msg: 88,
},
methods: {}
})
</script>
|
补充：v-if可以和v-for一起使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <div id="app">
<div v-if='item === 22' v-for="(item,key,index) in obj">{{(index + 1) + '---' + key + ': ' + item }}</div>
</div>
<script src="../../js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
obj: {
name: 'Jamie',
gender: 'male',
age: 22
}
},
methods: {}
})
</script>
|
结果只显示