2018-09-14 vue常用指令
2018-09-15 本文已影响10人
其实_dnhl
v-bind
v-bind 特性被称为指令，v-bind是绑定属性的，如下边的例子：
点击切换图片
<img v-bind:src="url" alt="" v-on:click="add">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
url: "img/1.jpg",
//urll:"img/2.jpg"
flag:true
},
methods:{
add:function(){
if (this.flag){
this.url = 'img/2.jpg';
this.flag=false
}else {
this.url = 'img/1.jpg';
this.flag=true
}
}
}
});
</script>
其中用v-bind还可以做出类似轮播图的效果：
<div id="app">
<img v-bind:src="url" alt="">
<ul>
<li v-for="(value,index) in arr" v-on:click="add(index)">{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
url:"img/1.jpg",
arr:["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
},
methods:{
add:function(ind){
this.url = this.arr[ind];
}
}
});
</script>
v-show与v-if
v-show与v-if都是控制元素的显示或隐藏，但是区别在于 v-show相当于display：none 而v-if相当于visibility:hidden;
display：none；与visibility:hidden;都是隐藏，区别是：
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
用v-show的做出点击隐藏的效果，如以下案例：
#add{
width: 100px;
height: 100px;
background-color: #ff7c35;
}
</style>
<body>
<div id="app">
<button v-on:click="kk">点击隐藏</button>
<div id="add" v-show="see"></div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
see:true
},
methods:{
kk:function(){
/*if (this.see){
this.see =false
}else {
this.see = true
}*/
//或
this.see = !this.see
}
}
});
//当true改为false的时候就隐藏了，也可以在v-show里see前面加上！ //v-show也可以换成v-if，作用都是隐藏 //！的意思是非，非就是取反，see=true 那么 ！see=false
v-if v-else-if 和 v-else
这三个指令相当于js里的分支结构，目的是：在vuejs中，当有多种条件时应对的方法
如以下案例：
<div id="app">
<p v-if="num==0">{{m}}</p>
<p v-else-if="num==1">{{mes}}</p>
<p v-else-if="num==2">{{mess}}</p>
<p v-else-if="num==3">{{me}}</p>
<p v-else-if="num==4">{{messa}}</p>
<p v-else="num==5">{{message}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
m:"00000",
mes:11111,
mess:22222,
me:33333,
messa:44444,
message:55555,
num:Math.floor(Math.random()*(5-0+1)+0)
}
});
</script>
还有随机数公式：
Math.floor (Math.random()*(max-min+1)-min)
最后结果就会输出data里随机一个
