<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})

这里的 ok 参数值和 JavaScript 中的判断一致，为 0、null、undefined、false 时为假，其他值为真。

v-if 与 v-show 的区别？

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

给 Num 绑定一下，可以看出来随机数字是多少:

new Vue({
  el: '#app',
  data:{
       Num:Math.random()
    }
})

过滤器可以接收多个表达式，message 和 mesage2 将作为过滤器的前两个参数：

<div id="app">
  {{ message,message2 | capitalize('aa') }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'facesoho',
    message2: 'facesoho'
  },
  filters: {
    capitalize: function (value,value2,value3) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)+value.substring(0,value2.length-1)+value2.charAt(value2.length-1).toUpperCase()+'<br>'+value3
    }
  }
})
</script>

尝试一下 »

当我们给一个比如 props 中，或者 data 中被观测的对象添加一个新的属性的时候，不能直接添加，必须使用 Vue.set 方法。

Vue.set 方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新

这里本来 food 对象是没有 count 属性的，我们要给其添加 count 属性就必须使用 Vue.set 方法，而不能写成 this.food.count = 1