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

矫情吗；* 2022-01-21 11:11 120阅读 0赞

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>

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

![2018111718160012.jpg][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70][]

[2018111718160012.jpg]: https://img-blog.csdnimg.cn/2018111718160012.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70]: /images/20220121/56baf99f2eee4172afdd07bdd39c15cf.png