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
