Vue 内部指令整理

在上篇文章《 Vue入门 文本输出》中介绍的 v-text 和 v-html 是Vue指令中的其中两个，接下来继续学习Vue的其他指令。

一 文本显示隐藏

1. v-show

 <div id="app">
        <div v-show="isShow">The example of "v-show"</div>
       <div v-if="isIf">The example of "v-if"</div>
    </div>

<script src="js/vue.js"></script>
    <script>
        new Vue({
   
            el: "#app",
            data: {
   
                // isShow: true
                isShow: false,
                isIf: false
            }
        })
    </script>

2. v-if v-else（条件语句）

 <div id="app">
       <div v-if="isIf">The example of "v-if"</div>
       <div v-else>"v-if" is "false" then "v-else" showed</div>
    </div>

<script src="js/vue.js"></script>
    <script>
        new Vue({
   
            el: "#app",
            data: {
   
                isIf: true
            }
        })
    </script>

v-if 为 true时，运行结果：

v-if 为 flase时，运行结果：

v-show 和 v-if 用于显示 DOM 是否显示。但是两者有以下区别：
v-show 相当于 display，v-show 设置为 false 相当于display: none; 元素仍然存在只是隐藏了，可用于页面中需要多次切换的情况；
v-if 相当于 remove，v-if 设置为 false 就是将元素删除不存在了，可用于页面中只需要切换一次的情况，如引导操作。

---

二 循环

3. v-for

（1） 循环普通数组

定义普通数组后在html中用v-for指令渲染。

<div id="app">
        <!-- :key ="index"是v-bind:key ="index"的简写 -->
        <p v-for="(item,index) in arr" :key ="index">
            索引：{
  {index}} --> 值：{
  {item}}
        </p>
    </div>

<script src="js/vue.js"></script>
    <script>
        new Vue({
   
            el: "#app",
            data: {
   
                arr: [1,2,3,4,5]
            }
        })
    </script>

运行结果：

（2） 循环对象数组

<p v-for="(user,index) in arrObj" :key="index">
   序号：{
  {user.id}} --> 姓名：{
  {user.name}}
</p>

<script src="js/vue.js"></script>
    <script>
        new Vue({
   
            el: "#app",
            data: {
   
                arr: [1,2,3,4,5],
                arrObj: [