首先复习一下
v-for="" 循环
v-model='' 双向数据绑定 用于表单元素
v-on:事件名='函数名' 绑定一个事件的 简写@click=""
今天所学
1.v-bind
v-bind:属性名='' 绑定一个属性 简写 ：属性名='值'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="jie">
<img v-on:click="alt" v-bind:src="url" alt="">
</div>
<script>
new Vue({
el:'#jie',
data:{
url:'images/1.jpg',
flag:true
},
methods:{
alt:function(){
if (this.flag){
this.url="images/2.jpg";
this.flag=false
}else{
this.url='images/1.jpg';
this.flag=true
}
}
}
})
</script>
</body>
</html>
效果如下图所示
点击图片会更换图片 再次点击更换回来
QQ截图20180914175007.png
QQ截图20180914175015.png
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
padding: 0;
margin: 0;
}
ul li{
text-align: center;
float: left;
border: 1px black solid;
list-style: none;
width: 25px;
line-height: 25px;
}
</style>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="jie">
<img :src="url" alt="" >
<ul>
<li v-for="(value,index) in list" v-on:click="chg(index)">{{index+1}}</li>
</ul>
</div>
<script>
new Vue({
el:'#jie',
data:{
url:'images/1.jpg',
list:['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg']
},
methods:{
chg:function(index){
this.url=this.list[index]
}
}
})
</script>
</body>
</html>
类似于轮播图 点击li更换图片 图中使用的v-bind是简写
输出效果如下图所示 点击1时是一张图片 2时是另一张 3和4同理
QQ截图20180914175442.png
QQ截图20180914175451.png
QQ截图20180914175505.png
2.v-show
控制元素的显示或隐藏 display:none
&& 与
|| 或
// 有假与为假，有真或为真
！ 非 取反
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="jie">
<p>{{msg}}</p>
<h1 v-show="!see">{{msg}}</h1>
</div>
<script>
new Vue({
el:'#jie',
data:{
msg:'hello world',
see:true
}
})
</script>
</body>
</html>
效果如下图所示
h1不显示 p显示
QQ截图20180914175819.png
点击按钮隐藏图片再次点击 显示图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="jie">
<button v-on:click="hid">点击</button>
<img src="images/1.jpg" alt="" v-show="see">
</div>
<script>
new Vue({
el:'#jie',
data:{
see:true
},
methods:{
hid:function(){
// this.see=!this.see
if(this.see){
this.see=false
}else {
this.see=true
}
}
}
})
</script>
</body>
</html>
效果如下图所示
QQ截图20180914185422.png
QQ截图20180914185436.png
v-if="" 控制元素的显示或隐藏 visibility:hidden;
与v-show不同之处
、实现方式
v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点
v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。
2、编译过程
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
3、编译条件
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译；
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；
4、性能消耗
v-if有更高的切换消耗，不适合做频繁的切换；
v-show有更高的初始渲染消耗，适合做频繁的额切换；
随机数生成
num:Math.floor(Math.random()*(max-min+1)+min)
网友评论