1.if的基本使用
<div id="xxoo"> <div v-if="scroe >= 90">优秀</div> <div v-else-if="scroe >= 80 && scroe < 90">良好</div> //发现 v-if || v-else || v-else-if 没有区别
<!-- //if结构 --> <div v-else-if="scroe >= 60 && scroe < 80">一般</div> <div v-else="scroe < 60">不太行</div> <div v-show="flag" >oooo</div> //v-show和if的区别就是 if是渲染显示 show是可能已经渲染 控制dispaly:none和block(实际用法) <button v-on:click="tention"></button> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var pp = new Vue({ el:"#xxoo", data:{ scroe:20, flag:false, //v-show的布尔值设置 相当于开启block }, methods:{ tention:function(){ this.flag = true; } } }) </script>
2.for的数组的遍历
<div id="xxoo"> <ul> <li v-for="item in str">{{item}}</li> <!--item 为形参 数组的值 str为数组-->> <li v-for="(item,index) in str">{{item + "-----" + index}}</li> <!--index 为数组序号-->> </ul> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var pp = new Vue({ el:"#xxoo", data:{ str:["你","是","傻","吗"] }, methods:{ }, }) </script>
注意:遍历的时候加上 :key="item.id" 可以增加vue的性能,提高加载速度(加不加不影响实际效果,但是在遍历的时候都加上比较好)
例:
<li :key="item.id" v-for="(item,index) in str">{{item + "-----" + index}}</li> <!--index 为数组序号-->> //id为data里面数组对象的id属性
food:[{ id:1,
fname:"米饭",
ename:"rise"
},{
id:2,
fname:"水果",
ename:"fruits"
},{
id:3,
fname:"水",
ename:"water"
}]
},
3.for的对象的遍历
<div id="xxoo"><div v-for="(v,k,i) in str">{{v + "--------" + k + "--------" + i}}</div> //遍历 <!-- v是对象属性值 k是属性 i是index-->
</div> <!-- result: libin--------name--------0 18--------age--------1 computergame--------hobby--------2 猫妖--------girlfriend--------3 --> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var pp = new Vue({ el: "#xxoo", data: { str: { name: "libin", age: "18", hobby: "computergame", girlfriend: "猫妖", //引用对象 } }, methods: { }, }) </script>
4.if和for一起用
<div v-if="v === 'libin'" v-for="(v,k,i) in str">{{v + "--------" + k + "--------" + i}}</div>
//解释： 当对象的值是’libin’ 显示关于’libin’的属性和属性值
<!-- v是对象属性值 k是属性 i是index-->