1. Conditional rendering

(1) v – the if

The V-if directive is used to conditionally render content (based on the value of an expression) and can be used with the V-else and V-else directives

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p v-if="type === 'A'">A</p>
        <p v-else-if="type === 'B'">B</p>
        <p v-else-if="type === 'C'">C</p>
        <p v-else>Else</p>
    </div>

    <script>
        new Vue({
            el: '#app'.data: {
                type: 'A'}})</script>
</body>

</html>
Copy the code

(2) V-if & V-show

The V-show command can also render content based on whether an expression is true or false

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p v-show="isSeen">A</p>
    </div>

    <script>
        new Vue({
            el: '#app'.data: {
                isSeen: true}})</script>
</body>

</html>
Copy the code

The difference is that v-if adds or removes DOM elements directly, whereas v-show modifies the display attribute of the element

Therefore, v-if is suitable for relatively stable elements and V-show for frequently switched elements

(3) the template

V-if is an instruction, so it must be added to one element. What if you want to add it to multiple elements at the same time?

You can use the

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <template v-if="isOk">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>
    </div>

    <script>
        new Vue({
            el: '#app'.data: {
                isOk: true}})</script>
</body>

</html>
Copy the code

2. List rendering

The V-for directive is used to render a list

(1) Use arrays

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in items">
                {{ item.message }}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app'.data: {
                items: [{message: 'Hello' },
                    { message: 'Hi'}]}})</script>
</body>

</html>
Copy the code

V-for for arrays also supports an optional second argument, the index of the current item: v-for=”(item, index) in items”

(2) Use objects

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="value in object">
                {{ value }}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app'.data: {
                object: {
                    firstName: 'Steve'.lastName: 'Jobs'}}})</script>
</body>

</html>
Copy the code

V-for for objects also supports an optional second argument, the key of the current item: v-for=”(value, key) in object”

An optional third argument, the index of the current item, is also supported: V -for=”(value, key, index) in object”

(3) Use integers

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <span v-for="n in 10">{{ n }} </span>
    </div>

    <script>
        var vm = new Vue({
            el: '#app'
        })
    </script>
</body>

</html>
Copy the code

(4) Maintenance status

When Vue is updating a list of elements rendered using V-for, it defaults to the “update in place” policy

That is, if the order of data items is changed, Vue will not move DOM elements to match the order of data items

Instead, each element is updated in place and rendered correctly at each index location

So to keep track of each node, we need to provide a unique key for each item (typically using the base property as the key)

<div v-for="item in items" v-bind:key="item.id">
  <! - content - >
</div>
Copy the code

(5) Array update detection

For arrays, view updates are automatically triggered by using mutating methods:

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
// You can try calling the mutation method directly from the console on the previous example
vm.items.push({ message: 'Goodbye'})
Copy the code

Non-mutating methods always return a new array and can be used to replace the old array to trigger a view update. Non-mutating methods include:

  • filter()
  • concat()
  • slice()
// Try calling a non-mutating method from the console on the previous example, replacing the old array with a new one
vm.items = vm.items.filter(function (item) {
  return item.message.match(/Hi/)})Copy the code

Note that there are two other cases where an array change cannot be detected:

  1. Set the value of an array using an index, for examplevm.items[indexOfItem] = newValue
  2. Modify the length of the array, for examplevm.items.length = newLength

In this case, we can use the mutation method splice() to solve:

  1. Set the value of the array using the index,vm.items.splice(indexOfItem, 1, newValue)
  2. Modify the length of the array,vm.items.splice(newLength)

(6) Object change detection

Object changes cannot also be detected in the following cases:

  1. Add object properties, for examplevm.newValue = value(At this point, newValue is not a reactive attribute.)

In this case, we can use the instance method vm.$set to solve:

  1. Add object properties,vm.$set(object, propertyName, value)