Conditional statements v-if with v-show:
v-if：
v-if conditional instructions for rendering a content. This content will only return a true value in the expression command when they were rendered.
v-else-if, serving as the v-if "else-if blocks" can be used continuously. Must immediately behind the belt element, or v-if v-else-if that would otherwise not be recognized.
v-else instruction indicates the v-if "else block", must immediately after the element of the belt or v-if v-else-if that would otherwise not be recognized.
<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>
It can be an <template>element as invisible package elements, and using v-if above, rendering the final result will not contain <template>the element.
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
Vue will render elements as efficiently as possible, often reusing existing elements rather than starting from scratch rendering.
<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>
LoginType switch will not clear the contents of the user input has been entered. Since both templates use the same elements <input>will not be replaced - just replace its placeholder.
Vue provides a way to express "These two elements are completely independent and do not reuse them." Just add a key property to have a unique value:
<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>
Now, each time you switch the input box will be re-rendered. <label>The elements will still be efficiently reused, because they do not add the key attribute.
v-show:
Another option is for display elements based on the condition that v-show command, use roughly the same, except that the element with v-show will always be rendered and retained in the DOM.
v-show simply switch the CSS property display element.
v-show does not support<template>elements or support v-else.
<h1 v-show="ok">Hello!</h1>
v-if和v-show:
v-if "real" conditions rendering, because it will ensure that the event listener and sub-components within the conditional block is destroyed and rebuilt properly in the handover process.
v-if is inert: If the condition is false at the time of the initial rendering, then do nothing until the condition becomes true when the first time, will begin to render conditional block.
In contrast, v-show much simpler - no matter what the initial conditions, the elements will always be rendered, and simply based on the CSS switch.
In general, v-if higher switching overhead, and v-show a higher initial cost of rendering. Therefore, if the switching is very frequently used is preferably v-show; if conditions rarely change at runtime, using v-if preferred.
v-if used in conjunction with v-for:
When they are in the same node, the priority is higher than v-for v-if, which means that the v-if repeated run separately for each v-for loop.
- When you want to only some of the items render nodes, this priority mechanism can be useful:
<li v-for="todo in todos" v-if="!todo.isComplete">
{{ todo }}
</li>
- When you want to skip the conditional execution cycle, it may be v-if an element or layer is placed
<template>on.
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
Loop v-for:
V-for recycling instructions.
Array:
V-for use based on a command to render a list array.
v-for item in items instruction requires special syntax form, wherein, the source data is an array of items, item alias for the array element is iterative. v-for supports an optional second parameter, i.e., the index of the current item.
It can also be used as a separator of in an alternative, because it is closer to the syntax JavaScript iterator.
<div v-for="item of items"></div>
<ul id="example-2">
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
Variation method calls and an array of non-variant methods will trigger view updates.
Variation array of methods: push (), pop () , shift (), unshift (), splice (), sort (), reverse (), to call these methods will change the original array.
Non-variant array of methods: filter (), concat () , slice (), calling these methods will not change the original array, but always returns a new array.
example1.items.push({ message: 'Baz' })
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
One might think that an array of non-variant method calls will lead to discard existing Vue DOM and re-render the entire list. But that is not the case, so that the DOM element Vue be reused for the maximum range achieved some intelligent heuristics operation, so with an array of identical elements comprises to replace the original array is very efficient.
Due to limitations of javascript, Vue array can not detect the following changes:
- When a setting item using the index directly, for example: vm.items [indexOfItem] = newValue
Solution:- Vue.set the SET or $ vm:.
Vue.set (vm.items, indexOfItem, newValue) - Array.prototype.splice：
vm.items.splice(indexOfItem, 1, newValue)
- Vue.set the SET or $ vm:.
- When modifying the length of the array, for example: vm.items.length = newLength
Solution: vm.items.splice (newLength)
Object:
V-for use to traverse the attribute of an object. The first parameter is an object of the attribute value, the second parameter is a property name of the object, the third parameter as an index.
When traverse the object, is based on the results Object.keys () traversal, but can not guarantee its results under different JavaScript engine is the same.
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
Due to JavaScript restriction, Vue can not detect the object's properties to add or remove:
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
// `vm.b` 不是响应式的
vm.b = 2
For instance has been created, Vue can not dynamically add the root level responsive properties. However, properties can be added responsive to the nested object using Vue.set (object, key, value) method.
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
Vue.set(vm.userProfile, 'age', 27);//或者vm.$set
As has been the object gives a number of new attributes:
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
key:
In-place update strategy: when the Vue is updating the list elements using v-for rendering, which uses "in-place update" policy by default. If the order of the data item is changed, Vue DOM element will not be moved to match the sequence of data items, but each element in-place update, and ensure that they render correctly in each index. This default mode is effective, but does not depend only apply to the temporary DOM subassembly state or state (e.g.: form input values) of the list rendered output.
In order to give a prompt Vue, so that it can track the status of each node, thereby re-use and reorder existing elements, the need to provide a unique key for each property:
Do not use an object or an array of non-primitive type value such as v-for the key. But the use of string or numeric value type.
As provided key attribute when using the v-for, DOM traversal output unless the content is very simple, deliberately or rely on the default behavior for performance improvement.
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
