Vue—条件语句、循环语句

朱雀 2023-07-12 14:55 191阅读 0赞

**Vue条件与循环**

**1、条件判断**

条件判断使用v-if指令

<div id="app">
        <p v-if="seen">Hello  word!</p>
        <template v-if="ok">
          <h1>菜鸟教程</h1>
          <p>学的不仅是技术，更是梦想！</p>
        </template>
    </div>
    <script>
    new Vue({ 
      el: '#app',
      data: { 
        seen: true,
        ok: true
      }
    })
    </script>

注：在这个例子里，v-if 指令根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。  
效果如下：  
![在这里插入图片描述][20200309155014325.png]  
**v-else指令**

可以用v-else 指令给 v-if 添加一个 “else” 块：  
例：随机生成一个数字，判断是否大于0.5，然后输出对应信息：

<div id="app">
        <div v-if="Math.random() > 0.5">
          Sorry
        </div>
        <div v-else>
          Not sorry
        </div>
    </div>
        
    <script>
    new Vue({ 
      el: '#app'
    })
    </script>

**// 输出：Sorry**

**v-else-if指令:**  
可以链式的多次使用：

效果如下：  
![在这里插入图片描述][20200309161648371.png]  
注：v-else 、v-else-if 必须跟在 v-if 之后。

**2、循环语句**

**v-for指令**  
v-for 可以绑定数据到数组来渲染一个列表：

<div id="app">
      <ol>
        <li v-for="site in sites">
          { {  site.name }}
        </li>
      </ol>
    </div>
     
    <script>
    new Vue({ 
      el: '#app',
      data: { 
        sites: [
          {  name: 'Runoob' },
          {  name: 'Google' },
          {  name: 'Taobao' }
        ]
      }
    })
    </script>

效果如下：  
![在这里插入图片描述][20200309163151904.png]  
**v-for 迭代整数**

v-for 也可以循环整数

效果如下：

![在这里插入图片描述][20200309163418148.png]

## v-model指令 - 双向数据绑定 ##

HTML:

<div id="app">
      <p>{ {  text }}</p>
      <input type="text" v-model="text">
    </div>
    
    Vue：
    var vm = new Vue({ 
      el:'#app',
      data:{ 
        text:"v-model指向实现双向绑定",
      }
    })

效果如下：

![在这里插入图片描述][20200310162930626.png]  
**注：当M层数据更改时自动更新V层数据，而当V层更改时不会更新M层数据。**

如上所示，当更改视图层(V)数据时，相应数据层(M)也更新了数据。  
![在这里插入图片描述][20200310163032299.png]  
当更改数据层(M)数据时，相应视图层(V)也更新了数据。

[20200309155014325.png]: https://img-blog.csdnimg.cn/20200309155014325.png
[20200309161648371.png]: https://img-blog.csdnimg.cn/20200309161648371.png
[20200309163151904.png]: https://img-blog.csdnimg.cn/20200309163151904.png
[20200309163418148.png]: https://img-blog.csdnimg.cn/20200309163418148.png
[20200310162930626.png]: https://img-blog.csdnimg.cn/20200310162930626.png
[20200310163032299.png]: https://img-blog.csdnimg.cn/20200310163032299.png