vue - 流程控制

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

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

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

条件判断

包含 v-show 和 v-if 两种语法，界面效果是一样的：

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

循环控制

使用 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="(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>

拓展

其它模版引擎也会具备类似的语法，下面是 layui 的模版语法，学习的时候，可以参考一些自己熟悉的代码。

<script id="demo" type="text/html">
  <h3>{{ d.title }}</h3>
  <ul>
  {{#  layui.each(d.list, function(index, item){ }}
    <li>
      <span>{{ item.modname }}</span>
    </li>
  {{#  }); }}
  {{#  if(d.list.length === 0){ }}
    无数据
  {{#  } }} 
  </ul>
</script>