Vue.js学习笔记 二 : 指令: v-if 条件(v-sho
2017-02-21 本文已影响939人
有情怀的程序猿
1: v-if条件
//html
<div class="item">
<p>v-if="条件" 指令</p>
<div id="app3">
<button v-on:click="change()">if条件</button>
<span v-if="seen">看到我了, 说明你使用的是v-if条件指令seen为{{seen}}</span>
</div>
</div>
//js
// 条件与循环==>条件 v-if=""
let app3 = new Vue({
el: '#app3',
data: {
seen: true
},
methods: { //这里使用了方法,
change: function (event) {
this.seen = this.seen? false : true
}
}
})
- 要求的效果是点击按钮切换是否渲染
- 这里不是display: none或者block的切换, 这是代码块是否渲染的问题
- 显示隐藏使用 v-show
1-1: v-if ... v-else 以及 v-esle-if
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
// v-if... v-else v-esle-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
- 不同条件渲染不同的元素
-
且支持
template语法<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> -
使用 key 控制元素的可重用
- **注意: **Vue 尝试尽可能高效的渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 更快之外还可以得到一些好处, 例如:
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
- 两个模版由于使用了相同的元素 `<label>,<input>`, 则 `<input>` 会被复用，但是在 `input` 输入的内容在从用户名登陆切换成邮箱登陆页面时仍然在输入框中,
- 我们要求切换后 `input` 也是空的, 可以使用 `key` 作为 **唯一值** 标示.
```
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
```
- 这样有了唯一标示 `key`, 就会从新渲染 `input`
- `label`没有标示, 所以不会从新渲染
2: v-show 以及与 v-if 的区别
<h1 v-show="ok">Hello!</h1>
-
v-show条件性显示或隐藏, -
v-show的元素会始终渲染并保持在DOM中。v-show是简单的切换元素的CSS属性display -
v-show不支持template
2-1: v-show 与 v-if 的区别
v-if是真实的条件渲染，因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
-
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。 -
v-if支持template,v-show不支持 - 相比之下，
v-show简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。 -
一般来说，
v-if有更高的切换消耗而v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用v-show较好，如果在运行时条件不大可能改变则使用v-if较好。
3: v-for 循环
我认为它类似 for...in... 循环遍历
格式:
- v-for 指令根据一组数组的选项列表进行渲染。
//todos 数组的选项列表
let app4 = new Vue({
el: '#app4',
data: {
message: '',
todos: [
{text: '被遍历的数据(数组), 写在vue.js格式的data中'},
{text: '还可以在写一个添加方法'},
{text: '或者删除'},
{text: '本页其实都可以全部这样生成'},
],
}
})
- v-for 指令需要以 item in items 形式的特殊语法， items (就是上面代码的todos)是源数据数组并且 item (下面代码的todo) 是数组元素迭代的别名。
<div class="item">
<p>v-for="条件" 指令</p>
<div id="app4">
<!-- <button v-on:click="change()">for循环</button> -->
<ol>
<li><p>类似for..in函数, todo遍历data下的todos数组,</p></li>
<li><p>然后把遍历出来的单元赋值todo, 在使用todo.text把的text的值调出来</p></li>
<li v-for="todo in todos"> // item in items的格式
{{todo.text}}
</li>
</ol>
<div>
<input type="text" v-model="message" placeholder="输入下试试"> <button v-on:click="send(message)">添加</button>
<p>{{message}}</p>
</div>
</div>
</div>
一个简单的 todoList 贴个完整的代码:
//html
<div class="item">
<p>v-for="条件" 指令</p>
<div id="app4">
<!-- <button v-on:click="change()">for循环</button> -->
<ol>
<li><p>类似for..in函数, todo遍历data下的todos数组,</p></li>
<li><p>然后把遍历出来的单元赋值todo, 在使用todo.text把的text的值调出来</p></li>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
<div>
<input type="text" v-model="message" placeholder="输入下试试">
<button v-on:click="send(message)">添加</button>
<p>{{message}}</p>
</div>
</div>
</div>
//js
let app4 = new Vue({
el: '#app4',
data: {
message: '',
todos: [
{text: '被遍历的数据(数组), 写在vue.js格式的data中'},
{text: '还可以在写一个添加方法'},
{text: '或者删除'},
{text: '本页其实都可以全部这样生成'},
],
},
//添加todo事件
methods: {
send:function (mes) {
let obj = {text: mes}
this.todos.push(obj);
this.message = '';
}
}
})
- 这里有 v-model数据双向绑定, 暂时在这里先不说
3-1: v-for="(item, index) in items", v-for的第二个属性 index
//html
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
//js
var example2 = new Vue({
el: '#example-2',
data : {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果
- Parent - 0 - Foo
- Parent - 1 - Bar
3-2: v-for= "(value , key, index) in object" 还可以遍历一个对象 及对对象的遍历, 对对方法的遍历, 对对整数的遍历
对一个对象的遍历, 除了可以遍历出来值(value) 还有键(key) 和 索引(index)
//html
//对对象的遍历, 对方法的遍历, 对整数的遍历
<div class="item">
<p>3-1: v-for="条件"循环中加入方法 指令</p>
<div id="app5">
<ol>
<li v-for="n in filterNumber(numbers)"> {{n}}</li>
</ol>
<p>对对象的遍历</p>
<ul>
<li v-for="(value, key, index) in obj">
'key' - {{key}} - 'value' - {{value}} - 'index' -{{index}}
</li>
</ul>
<p>对整数的遍历</p>
<ul>
<li v-for="n in 10">{{n}}</li>
</ul>
</div>
</div>
//js
let app5 = new Vue({
el: '#app5',
data: {
numbers: [1, 2, 3, 4, 5, 6, 7, 8],
obj: {
'这是对': '对象',
'的': '遍历',
'你看看': '好使不'
}
},
methods: {
filterNumber: function () {
return this.numbers.filter((item) => {
return item % 2 === 0;
})
}
}
})
