v-if && v-show && v-else
<div id="app">
<div v-if="isLogin">你好：WarmT</div>
<!-- <div v-show="isLogin">你好：WarmT</div> -->
<div v-else="isLogin">請登錄后在操作</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isLogin:false
}
})
</script>
v-if和v-show的區別：
- v-if 判斷是否加載，如果時false就不請求了，可以減輕服務器壓力，在需要時加載
- v-show 調整css display屬性，可以使客戶端操作更加流暢。
v-for 和 v-for 排序
<div id="app">
<h2>數組排序</h2>
<ul>
<li v-for="item in sortItems">
{{item}}
</li>
</ul>
<h2>對象排序</h2>
<ul>
<li v-for="(student,index) in students">
{{index + 1}}: {{student.name}}----{{student.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[22,14,23,54,36,28,7],
students:[
{name:'warmT',age:33},
{name:'pangpang',age:22},
{name:'king',age:14},
]
},
computed:{
sortItems:function(){//對象排序
return this.items.sort(sortNumber);
},
sortstudents:function(){//數組排序
return sortByKey(this.students,'age');
}
}
})
function sortNumber(a,b){//對象排序
return a-b;
}
function sortByKey(array,key){//數組排序
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
};
</script>
v-text 和 v-html 排序
<div id="app">
<span v-text="msg"> </span>
<span v-html="dodo"> </span>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
msg:"vText的內容",
dodo:"<h2> vHtml內容 </h2>"
}
})
</script>
綁定事件 v-on可以用 @替換
<div id="app">
本場比賽得分：{{count}}<br>
<button v-on:click="jiafen"> 加分 </button>
<button @click="jianfen"> 減分 </button>
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
count:1,
secondCount:2
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
},
onEnter:function(){
this.count=this.count + parseInt(this.secondCount);
}
}
})
</script>
image.png
