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-->