v-on:（事件）=" " v-on:指令是用来绑定事件的。
v-bind:（标签的属性）：属性值 v-bind：指令是绑定属性。
v-show=" " v-show：指令是控制元素的显示和隐藏。
v-if v-else if 用于条件判断。
v-model 双向数据绑定，
v-on 绑定事件例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<input type="text" v-model="tex"/>
<button v-on:click="add">按钮</button>
<ul>
<li v-for="(value,index) in arr">{{value}}</li>
<button v-on:click="app(index)">删除</button>
</ul>
</div>
<script>
new Vue({
el:'#box',
data:{
arr:['成功','需要','努力'],
tex:''
},
methods:{
add:function(){
this.arr.push(this.tex)
this.tex=''
},
app:function(i){
this.arr.splice(i,1)
}
}
})
</script>
</body>
</html>
v-bind绑定元素例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<img v-bind:src="ul" alt="" v-on:click="add"/>
</div>
<script>
new Vue({
el:'#box',
data:{
ul:'img/2.jpg',
bool:true
},
methods:{
add:function(){
if(this.bool==true){
this.ul='img/2.jpg'
this.bool=false
}else{
this.ul='img/3.jpg'
this.bool=true
}
}
}
})
</script>
</body>
</html>
v-show 控制元素的显示和隐藏，例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a{
width: 200px;
height: 100px;
background: red;
border: 1px solid red;
}
</style>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<button v-on:click="add">隐藏</button>
<div class="a" v-show="qq"></div>
</div>
<script>
new Vue({
el:'#box',
data:{
qq:true
},
methods:{
add:function(){
if(this.qq==true){
this.qq=false
}else{
this.qq=true
}
}
}
})
</script>
</body>
</html>
v-if v-else if 用于条件判断，小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/vue.js"></script>
<div id="box">
<p v-if="num==0">1111</p>
<p v-else-if="num==1">222</p>
<p v-else-if="num==2">333</p>
<p v-else="num==3">4444</p>
</div>
<script>
new Vue({
el:'#box',
data:{
num:Math.floor(Math.random()*(5-1+1)+0)
}
})
</script>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
