vue基础——循环分支结构

循环结构

v-for遍历数组(数组里面的值可以是对象)

item每项的数据 index每项的索引

<li v-for="item in flag">{{item}}</li> <li v-for="(item,index) in flag">{{item+"-------"+index}}</li> flag:["apple","banana","arange"],

key的作用：帮助Vue区分不同的元素，从而提高性能

<li :k="item.index" v-for="(item,index) in fruits">

分支结构

分支结构 v-if v-eles v-eles-if v-show false 隐藏   true显示

<div id="app"> <input type="text" v-model="score"/> <input type="button" name="" id="" value="显示" v-on:click="handle"/> <div v-if="score>=60&&score<80">及格</div> <div v-else-if="score>=80">优秀</div> <div v-else="score<60">不及格</div> <!--控制元素样式是否显示--> <div v-show="flag" >测试v-show</div> </div> <script type="text/javascript"> var app = new Vue({ el:"#app", data:{ score:'', flag:false }, methods:{ handle:function(){ this.flag = !this.flag; } } }) </script>

v-if和v-show的区别

v-if控制元素是否渲染到页面 v-show控制元素是否显示(已经渲染了页面) v-if适用于操作不是很多的情况 隐藏就是把这个元素删除掉(removeChild) v-show 频繁操作 隐藏就是display:none

v-for和v-if结合使用

<div id="app"> <!--值，键，索引--> <!--只有符合if条件的才会显示出来--> <div v-if="value>17" v-for="(value,key,index) in obj">{{value+"-----"+key+"-----"+index}}</div> </div> <script type="text/javascript"> var obj ={ uname:"苹果", age: 18, sex: "man" } for(var key in obj){ console.log(key,obj[key]) } var app = new Vue({ el:"#app", data:{ }, methods:{ handle:function(){ this.flag = !this.flag; } } }) </script>