指令

Vdt模板引擎，提供了一些特殊指令完成特定的工作，其实他们都是语法糖而已， 如果有必要，你完全可以使用纯JS代替他们

条件渲染

条件渲染涉及三个指令：v-if & v-else-if & v-else。顾名思义，他们控制什么 条件下渲染当前元素。

  1. <div v-if={self.get('num') > 0}>正数</div>
  2. <div v-else-if={self.get('num') < 0}>负数</div>
  3. <div v-else>0，既不是正数，也不是负数</div>

v-else-if & v-else必须跟在v-if元素后面（空白字符除外），否则会引起编译报错。

循环渲染

循环渲染涉及三个指令：v-for & v-for-key & v-for-name。

  • v-for 指定要遍历的数据，可以为数组或对象
  • v-for-key 为遍历的键名指定形参名，对于数组则为索引，默认为key
  • v-for-value 为遍历的值指定形参名，默认为value
  1. <ul>
  2.     <li v-for={self.get('books')} v-for-key="name">
  3.         {name}: ￥{value}元
  4.     </li>
  5. </ul>

对于键值的形参，并非只有子元素才能获取，被循环的元素就可以获取它们了。

  1. <ul>
  2.     <li v-for={self.get('books')} data-name={key}>
  3.         {key}: ￥{value}元
  4.     </li>
  5. </ul>

v-if与v-for一起使用

当v-if与v-for一起使用时，v-for具有更高优先级，此时v-if用来控制单次 循环是否展示。并且你可以在v-if中，使用v-for提供的形参key & value 来进行条件判断。