Using Conditionals and Rendering Lists笔记

Vue提供条件指令，循环指令，这让Vue好像一门语言一样。这篇笔记还是对Vue JS 2 课程的笔记总结

条件渲染

v-if指令

vue提供了v-if指令，可以根据某个变量的是true或false，来决定对应的DOM元素是否会展示出来。通过这样的条件判断，可以实现在不同情况下，页面上展示不同内容。vue还支持v-else指令，可以配合v-if进行逻辑开发。当需要对多个平级的HTML元素，同时执行v-if时，可以用<template>这个HTML5的标签，对整体HTML代码进行封装。用div标签也可以，只是有可能会有一些副作用。

v-show指令

v-show也可以实现根据某个变量的逻辑值，对部分HTML代码进行展示或隐藏。v-show和v-if的区别在于v-if会把对应元素从DOM树中移除，v-show只是在对应DOM元素的style上增加Display:none的属性

循环列表

在js，或python这样的语言中，for的使用场景，总是在遍历一个List. 而在C++中，很多时候用的更多的是while。

v-for 数组循环

v-for命令可以遍历一个array类型的data变量，可以用这种方式输出一个list。v-for同样可以使用template标签，对一段代码进行循环。

1
2
3

<ul>
	<li v-for='(stu, idx) in students'>{{ stu {%raw%}}}{%endraw} - ({{idx {%raw%}}}{%endraw%}</li>
</ul>

v-for 对象循环

js里面的对象，类似python里面的dictionary。这是一种化简的对象，所有的成员变量，成员函数都成了key/value的形式。v-for 遍历对象属性的语法，仍然是用in的形式

<div id='app'>
  <ul>
    <li v-for='person in persons'>
      <div v-for='(v,k,i) in person'>
        {{v}}-{{k}}-{{i}}
      </div>
    </li>
  </ul>
</div>

v-for 数值循环

for在多个语言中还是直接用数值作为循环次数的，vue也提供类似的语法

v-for k in 10