v-的指令（2）
v-bing 绑定一个属性 v-bing：属性名="值" 简写为：属性名="值"
v-show=" " 控制元素的显示与隐藏 display：none 隐藏
v-if=" " 控制元素的显示与隐藏 visibility:hidden
v-else
v-else-if
-
逻辑运算符
&& 逻辑与 有假与为假
| | 逻辑或 有真或为真
！ 逻辑非 取反 -
随机数
num ： Math.floor(Math.random（）*（max-min+1）+min)
var num = 123.456；
console.log（num.toFixed(2)）；四舍五入
console.log(Math.random()*1000.toFixed(0))
display:none和visibility:hidden的区别是：
1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。
1.v-bing 绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DocumentDocument</title>
</head>
<body>
<div id='itany'>
<img v-bind:src="url" alt="">
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg'
}
})
</script>
</body>
</html>
绑定url 显示下图
1.png
2.点击切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DocumentDocument</title>
</head>
<body>
<div id='itany'>
<img @click="p" v-bind:src="url" alt="">
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg'
},
methods:{
p:function(){
this.url="img/2.jpg"
}
}
})
</script>
</body>
</html>
点击图片变成了下图
2.png
3.来回切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DocumentDocument</title>
</head>
<body>
<div id='itany'>
<img @click="p" v-bind:src="url" alt="">
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
data:{
url:'img/1.jpg',
flag:true
},
methods:{
p:function(){
if(this.flag==true){
this.url="img/2.jpg",
this.flag=false
}else{
this.url="img/1.jpg",
this.flag=true
}
}
}
})
</script>
</body>
</html>
实现两张图来回切换
4.选项卡功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
width:500px;
height: 300px;;
}
li{
list-style:none;
width: 50px;
border:1px solid #000;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div id="itany">
<img v-bind:src="url">
<ul>
<li v-for="(value,index) in arr" @click="a(index)">{{index+1}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:"img/1.jpg",
arr:["img/1.jpg","img/2.jpg","img/6.jpg","img/3.jpg","img/index.jpg",]
},
methods:{
a:function(index){
this.url=this.arr[index]
}
}
})
</script>
</body>
</html>
3.png
v-show 隐藏
实现文字隐藏
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="itany">
<h1>{{msg}}</h1>
<p v-show="!see">{{msg}}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
msg:"hello vue",
see:true
}
})
</script>
</body>
</html>
图片点击隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
height: 100px;
width:100px;
background: red;
}
</style>
</head>
<body>
<div id="itany">
<button @click="a">点击隐藏</button>
<img src="img/6.jpg" v-show="!see">
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#itany",
data:{
url:"img/6.jpg",
see:true
},
methods:{
a:function(){
this.see=!this.see
//if(this.see){
// this.see=false;
// }else{
// this.see=true;
// }
}
}
})
</script>
</body>
</html>
网友评论