第五章--Vue.js的内置指令的精髓详解（上）
2019-10-15 本文已影响0人
kzc爱吃梨
5.1 基本指令
5.1.1 v-cloak一般与display：none进行结合使用
作用：解决初始化慢导致页面闪动的最佳实践
5.1.2 v-once
定义它的元素和组件只渲染一次
<style>
[v-cloak]: {
display: none;
}
</style>
<body>
<div id="app">
v-cloak作用：解决初始化慢导致页面闪动
<p v-cloack>{{msg}}</p>
<hr>
v-once: 只渲染一次后续不在重新渲染 <br>
<span v-once>{{onceData}}</span>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
msg: '村里有个姑娘就小芳',
onceData: '长得美丽又漂亮'
}
})
5.2 条件渲染指令
5.2.1 v-if, v-eles-if ,v-else
用法： 必须跟着屁股走
v-if后面的等号必须是布尔值
v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了
image.png
image.png
<div v-if="type==='name'">
<input type="text" placeholder="请输入用户名" key="name">
</div>
<div v-else>
<input type="text" placeholder="请输入密码" key="psd">
</div>
<button @click="toggleType">点击我切换</button>
<script>
var app = new Vue({
el: '#app',
data: {
type: 'name'
},
methods: {
toggleType: function(){
//三目运算符
this.type = this.type === 'name'? 'password' : 'name'
}
}
})
</script>
解决方法：加key，唯一，提供key值可以来决定是否复用该元素
5.2.2 v-show
只改变了css属性display
v-if和v-show的比较
v-if:
实时渲染：页面显示就渲染，不显示。我就给你移除
image.png
v-show:
v-show的元素永远存在也页面中，只是改变了css的display的属性
image.png
5.3 列表渲染指令v-for
用法: 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令 v-for。
两种使用场景：
- 遍历多个对象（一定是遍历数组）
- 遍历一个对象的多个属性
效果展示
<div id="app">
v-for用法：v-for一定要写在要遍历的元素上，v-for后面接等号=，类似于item in items <br>
遍历多个对象一定是遍历数组
<hr>
（1）遍历多个对象 <br>
<ul>
<li v-for="vueMth in vueMethods">{{vueMth.name}}</li>
</ul>
<br>
带索引符号写法：括号的第一个变量代表item，第二个表示index
<ul>
<li v-for="(vueMth,index) in vueMethods">{{index}}---{{vueMth.name}}</li>
</ul>
<hr>
(2)遍历一个对象的多个属性 <br>
<div v-for="value in nvshen">{{value}}</div>
<br>
拿到value,key,index的写法：v-k-i 外开
<div v-for="(value,key,index) in nvshen">第{{index}}个女神：--键是:{{key}}--{{value}}</div>
</div>
</body>
image.png
