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

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

修改模板内容：

 你未成年 
 你成年了 
 你可以结婚了 

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

二、v-for

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

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

修改模板的内容：

    

      

        {{fruit}}
      
    

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

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

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

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

    

      

        {{fruit}}
      
    

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

Hi.vue 最终的内容为：

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