Vue—条件语句、循环语句-蒲公英云

Vue—条件语句、循环语句

朱雀 2023-07-12 14:55 261阅读 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 元素。
效果如下：
在这里插入图片描述
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指令:
可以链式的多次使用：

<div id="app">
    <div v-if="type === 'A'">
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
<script>
new Vue({ 
  el: '#app',
  data: { 
    type: 'C'
  }
})
</script>

效果如下：
在这里插入图片描述
注：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>

效果如下：
在这里插入图片描述
v-for 迭代整数

v-for 也可以循环整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     { {  n }}
    </li>
  </ul>
</div>
<script>
new Vue({ 
  el: '#app'
})
</script>

效果如下：

在这里插入图片描述

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指向实现双向绑定",
  }
})