VUE - 基础语法（条件、循环）
v-show指令，判断元素是否应该显示：
传入的值为true，或能被转换为true，该元素会被显示。
传入的值为false，或能被转换为false，该元素会被隐藏。相当于设置了 display:none;。
<div id="test"> <p v-show="one">显示</p> <p v-show="two">显示</p> <p v-show="three">隐藏</p> <p v-show="four">隐藏</p> </div> <!--解析结果 - START--> <div> <p>显示</p> <p>显示</p> <p style="display:none;">隐藏</p> <p style="display:none;">隐藏</p> </div> <!--解析结果 - END--> <script type="text/javascript"> var obj = new Vue({ el : "#test", data : { one : true, two : 1, three : false, four : 0 } }); </script>
v-if、v-else-if、v-else，判断元素是否应该加载：
哪一个代码块的判断条件为true，就加载那一块，否则不被加载。
注意：v-show的运行结果是元素是否显示，这三个指令的运行结果是元素是否加载，还是有区别的。
<div id="test"> <p v-if="status=='loading'">loading</p> <p v-else-if="status='success'">success</p> <p v-else="status='fail'">fail</p> </div> <!--解析结果 - START--> <div> <p>loading</p> </div> <!--解析结果 - END--> <script type="text/javascript"> var obj = new Vue({ el : "#test", data : { status : "loading" } }); </script>
v-for指令，可以基于源数据多次渲染元素：
循环整数（整数就是循环次数 - 从1开始）：
//n in m或者n of m <ul id="test"> <li v-for="n in 2">{{n}}</li> <li v-for="n of 2">{{n}}</li> <li v-for="n in m">{{n}}</li> <li v-for="n of m">{{n}}</li> </ul> <!--解析结果 - START--> <ul> <li>1</li> <li>2</li> <li>1</li> <li>2</li> <li>1</li> <li>2</li> <li>3</li> <li>1</li> <li>2</li> <li>3</li> </ul> <!--解析结果 - END--> <script type="text/javascript"> var obj = new Vue({ el : "#test", data : { m : 3 } }); </script>
循环数组：
//item in arr 或者 item of arr，循环输出数据项 <ul id="test"> <li v-for="item in names">{{item}}</li> <li v-for="item of names">{{item}}</li> </ul> <!--解析结果 - START--> <ul> <li>张三</li> <li>李四</li> <li>王五</li> <li>张三</li> <li>李四</li> <li>王五</li> </ul> <!--解析结果 - END--> <script type="text/javascript"> var obj = new Vue({ el : "#test", data : { names : ["张三","李四","王五"] } }); </script> //(item,index) in arr 或者 (item,index) of arr，循环输出数据项和索引 <ul id="test"> <li v-for="(item,index) in names">第{{item}}个人是：{{item}}</li> <li v-for="(item,index) of names">第{{item}}个人是：{{item}}</li> </ul> <!--解析结果 - START--> <ul> <li>第0个人是：张三</li> <li>第1个人是：李四</li> <li>第2个人是：王五</li> <li>第0个人是：张三</li> <li>第1个人是：李四</li> <li>第2个人是：王五</li> </ul> <!--解析结果 - END--> <script type="text/javascript"> var obj = new Vue({ el : "#test", data : { names : ["张三","李四","王五"] } }); </script>
循环对象：
//value in obj或者value of obj，循环对象的值 <div id="test"> <p v-for="value in student">{{value}}</p> <p v-for="value of student">{{value}}</p> </div> <!--解析结果 - START--> <ul> <p>傻屌</p> <p>24</p> <p>傻屌</p> <p>24</p> </ul> <!--解析结果 - END--> <script type="text/javascript"> var obj = new Vue({ el : "#test", data : { student : { name : "傻屌", age : 24 } } }); </script> //(value,key) in obj或者(value,key) of obj，循环对象的值和属性 <div id="test"> <p v-for="(value,key) in student">属性：{{key}}，值：{{value}}</p> <p v-for="(value,key) of student">属性：{{key}}，值：{{value}}</p> </div> <!--得到结果 - START--> <div> <p>属性：name，值：傻屌</p> <p>属性：age，值：24</p> <p>属性：name，值：傻屌</p> <p>属性：age，值：24</p> </div> <!--得到结果 - END--> <script type="text/javascript"> var obj = new Vue({ el : "#test", data : { student : { name : "傻屌", age : 24 } } }); </script> //(value,key,index) in obj或者(value,key,index) of obj，循环对象的值、属性、索引 <div id="test"> <p v-for="(value,key,index) in student">第{{index}}个属性{{key}}的值为{{value}}</p> <p v-for="(value,key,index) of student">第{{index}}个属性{{key}}的值为{{value}}</p> </div> <!--得到结果 - START--> <div> <p>第0个属性name的值为傻屌</p> <p>第1个属性age的值为24</p> <p>第0个属性name的值为傻屌</p> <p>第1个属性age的值为24</p> </div> <!--得到结果 - END--> <script type="text/javascript"> var obj = new Vue({ el : "#test", data : { student : { name : "傻屌", age : 24 } } }); </script>
注意：v-for和v-if不推荐同时作用于一个元素，遇到这种情况，请谨慎构思标签结构。
