6.vue入门基础学习笔记-逻辑控制指令介绍

1 v-if

如果为true标签输出 否则标签不输出，不输出的意思是标签都不会在dom文档中存在
下面的代码其实就是 if else if else 太简单 不做介绍了

<h1 v-if="suman">suman</h1>
<h1 v-else-if="sumomo">sumomo</h1>
<h1 v-else="liuxiao">liuxiao</h1>

2 v-show

如果表达式为true标签显示 否则标签不显示，标签在dom中一直存在，通过display属性进行控制
v-show 不可以和v-if-else v-else 配合使用

<h1 v-show="suman">suman</h1>

v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

3 v-for

该标签用来进行便历生成dom标签，可以遍历，数组，对象，整数，当遍历的属性发生变化时，该处的dom会重新生成

遍历数组

操作数组里的元素，增删改等，数组地址不变，所以数组也是不变的，应该也不会触发试图的更新，但是vue针对数组的操作做了一些观察方法，所以下面的数组操作也会触发视图的更新
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()

filter(), concat(), slice() 。这些方法不会改变原始数组，但总是返回一个新数组，所以数组的内存地址发生变化，数组不再相等会触发观察者和视图更新

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如： vm.items.length = newLength
为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果， 同时也将触发状态更新：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)
为了解决第二类问题，你可以使用 splice：
example1.items.splice(newLength)

<ul id="example-1">
  <li v-for="item in items"><!-- 遍历数组中的元素 -->
    {{ item.message }}
  </li>
</ul>
<ul id="example-1">
  <li v-for="(item,index) in items"> <!-- item为元素，index为下标 -->
    {{ item.message }}
  </li>
</ul>
<script>
    var example1 = new Vue({
      el: '#example-1',
      data: {
        items: [
          {message: 'Foo' },
          {message: 'Bar' }
        ]
      }
    })
</script>

你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法

<div v-for="item of items"></div>

遍历对象

修改对象里的属性的值，但是对象地址并不会变化，因为程序判定的是内存地址，所以认为对象并没有变化不会触发视图的更新

<ul id="repeat-object" class="demo">
  <li v-for="value in object"> <!-- 迭代属性-->
    {{ value }}
  </li>
</ul>
<div v-for="(value, key) in object"><!-- 迭代属性和键值-->
  {{ key }} : {{ value }}
</div>
<script>
    new Vue({
      el: '#repeat-object',
      data: {
        object: {
          firstName: 'John',
          lastName: 'Doe',
          age: 30
        }
      }
    })
</script>

遍历指定次数

注意是从1开始到10结束，跟js写的不同，如果想跟js一样是从0开始9结束，那么可以添加index属性

<div>
  <span v-for="(n,index) in 10">{{ n }}|{{index}}</span>
</div>
<!--结果:1|0 2|1 3|2 4|3 5|4 6|5 7|6 8|7 9|8 10|9-->

利用template迭代多个标签

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>
<script>
    vue = new Vue({
        el: '#app',
        data: {
            parentMessage: 'Parent',
            items: [{
                    message: 'Foo'
                },
                {
                    message: 'Bar'
                }
            ]
        }
    })
</script>

在上面的代码中，便利了两次，template标签并没有输出， 最后生成的html结构如下,：

<ul>
    <li>Foo</li> 
    <li class="divider"></li>
    <li>Bar</li> 
    <li class="divider"></li>
</ul>

与v-for标签配合使用

当它们处于同一节点， v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想只有满足一定条件时才输出标签时 ，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>