如下的代码， 使用 v-show，仅当 goals 数组中存在元素时，才显示列表
data() {
return { goals: [], goal: "" };
},
<ul v-show = "goals.length > 0">
<li v-for="g in goals" key="g">{{g}}</li>
</ul>
如果用 dev tool 查看，会看到，即使 goals 数组为空，列表也存在于DOM 中，只不过此时 css style 被设置为隐藏：
<ul style="display: none;"></ul>
所以，v-show 只是使用 css 隐藏或显示项目。v-show=false 相当于设置: style=“display: none;” 反之：v-show=true 时 没有这一项
<ul style="">...</ul>
与之相反，v-if 真正从 DOM 中删除或者添加元素。
如何选择 v-if 或 v-show：一方面，使用 css 显示或隐藏意味着不必一直添加和删除元素，而添加和删除元素会降低性能，因此使用 v-show 能改善性能。 但另一方面，这也意味着DOM 中存在若干目前不需要的元素，这也不是特别理想。
因此，根据经验，通常应该只使用 v-if ，仅当有一个可见性状态频繁改变的元素时才回退到使用 v-show。
v-if 和 v-show 的区别，简而言之，v-if 添加或者删除元素，v-show 隐藏或者显示已经存在的元素。
