vue学习之三视图中的指令 v-if 和 v-for

最新推荐文章于 2025-10-12 22:42:58 发布

原创最新推荐文章于 2025-10-12 22:42:58 发布 · 853 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

19 篇文章

订阅专栏

本文深入讲解Vue.js中的关键指令，包括v-if、v-else-if、v-else和v-for的使用方法。通过实例演示如何根据条件显示内容，以及如何遍历数组并有条件地渲染元素。了解Vue指令如何提升网页应用的动态性和交互性。

vue的视图指令有v-on, v-bind, v-if, v-for 等等，只要是以 v- 开头的都是指令Directive。指令中都要使用表达式

一、v-if

script内容添加 age 的定义：

  data () {
    return {
      message: 'hi, 我的第一个vue程序',
      age: 19
    }
  }

模板内容添加：

运行程序，页面会显示 “你成年了”

v-if, v-else-if, v-else

修改模板内容：

<div v-if="age < 18"> 你未成年 </div>
<div v-else-if="age < 21"> 你成年了 </div>
<div v-else> 你可以结婚了 </div>

修改 age 的值，可以看到页面根据age的值显示不同的内容。

二、v-for

修改 script部分的内容，添加 fruits 变量和值：

fruits: ['apple', 'banana', 'pear', 'strawberry']

修改模板的内容：

    <ul>
      <li v-for="fruit in fruits" :key="fruit">
        {{fruit}}
      </li>
    </ul>

运行程序，页面会显示四种水果名。

三、v-for 和 v-if 同时使用

v-for 和 v-if 同时使用时，v-for的优先级更高，也就是说先执行v-for 再执行 v-if。

修改模板内容中的 v-for ：

    <ul>
      <li v-for="fruit in fruits" v-if="fruit.indexOf('e') >= 0">
        {{fruit}}
      </li>
    </ul>

运行程序，页面只显示包含字母 e 的水果，而banana由于不包含字母e不会在页面显示。

Hi.vue 最终的内容为：

<template>
  <div class='hi' v-on:click="showMessage('Jom')">
    {{message}}
    <div v-if="age < 18"> 你未成年 </div>
    <div v-else-if="age < 21"> 你成年了 </div>
    <div v-else> 你可以结婚了 </div>
    <ul>
      <li v-for="fruit in fruits" :key="fruit" v-if="fruit.indexOf('e') >= 0">
        {{fruit}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'hi, 我的第一个vue程序',
      age: 2,
      fruits: ['apple', 'banana', 'pear', 'strawberry']
    }
  },
  methods: {
    showMessage: function (name) {
      alert('hi, ' + name)
    }
  }
}
</script>

<style>
.hi{
  color: blue;
  font-size: 20px;
}
</style>

本文内容到此结束，更多内容可关注公众号和个人微信号：