vue - 流程控制

流程控制语法，只有 2 个：“for循环” 和 “if判断”。

不要怀疑，确实就只有 2 个。

vue 不需要做的像 freemarker、jsp 那样高级，因为前端代码还有 javascript 存在，如果需要额外的逻辑运算，可以通过 javascript 进行补充处理.

条件判断

控制显示隐藏的语法：包含 v-show 和 v-if，界面效果是一样的：

• v-show 只是隐藏了界面（css 中的 display: none，存在但是不可见），
• v-if 是从逻辑上阻止了界面渲染（从未出现过）。

其它相关的语法：v-if、v-else-if、v-else

循环控制

使用 v-for 语句可以实现数组和对象属性的遍历。

代码样例

<template>
  <div>
    <!-- 控制显示隐藏 -->
    <span v-show="show"></span>
    <!-- 控制显示隐藏 -->
    <span v-if="display"></span>
    <!-- 控制显示隐藏 -->
    <span v-show="show === true"></span>

    <ul>
      <!--遍历数组-->
      <li v-for="item in list">{{ item.name }}</li>
	  <li v-for="(item, index) in list">{{ item.name }}</li>

      <!--遍历对象属性-->
      <li v-for="(value, key) in map">{{key}} - {{value}}</li>

      <!--简单地实现 0-10 循环-->
      <li v-for="n in 10">{{n}}</li>
    </ul>
  </div>
</template>

<script>
/* eslint-disable */

export default {
    name: "Test",
    data(){
        return {
            show: true,
            display: true,
            list: [
                {name: 'Runoob'},
                {name: 'Google'},
                {name: 'Taobao'}
            ],
            map: {
                name: 'xiaoming',
                age: '30'
            }
        }
    }
}
</script>