欢迎来到 晓添Coding课堂 本章节咱们来说一下Vue中常用的指令，不废话直接上干货
v-show
作用
根据表达值的真假，切换元素的显示和隐藏
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<img src="./img/xiaozhuang.jpg" v-show="flag">
<span v-show="age >= 18">18岁以上才能看到哦</span>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
flag:true,
age:18
}
})
</script>
</html>
运行截图
总结
v-show指令的作用是根据真假切换元素的显示状态
原理是修改元素的display属性，实现显示隐藏
小案例：点击按钮实现显示/隐藏
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="showOrHide()">点击隐藏/显示</button>
<img src="./img/xiaozhuang.jpg" v-show="flag" />
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
// 默认显示
flag:true
},
methods:{
// 显示/隐藏函数
showOrHide:function(){
// 将值修改为上次的取反
this.flag = !this.flag
}
}
})
</script>
</html>
结果
v-if指令
作用
与v-show效果一样，通过真假控制页面是否显示指定元素
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" @click="isShow">点我切换状态</button>
<p v-if="show">v-if控制是否显示</p>
<p v-show="show">v-show控制是否显示</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
},
methods:{
isShow:function(){
this.show = !this.show
}
}
})
</script>
</html>
运行截图
通过下方运行效果大家可以看出来，v-if隐藏是控制DOM也就是直接删除元素，而v-show是控制display
总结
v-if指令的作用可以根据表达式 真假控制元素的显示状态
与v-show的区别在于，v-if直接控制DOM树，v-show是控制display属性
值为true是添加到dom中，false时从dom中移除
频繁显示隐藏时使用v-show，反之使用v-if，前者性能消耗较小
v-bind指令
作用
设置元素属性，比如src，title，type等
代码
语法
<div id="app">
<img src="图片地址">
<img v-bind:src="vue变量">
<img :src="vue变量">
</div>
案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.active {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<img v-bind:src="imgSrc" :class="isActive?'active':' '" @click="change"/>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data:{
imgSrc:"./img/xiaozhuang.jpg",
isActive:false
},
methods:{
change:function(){
this.isActive = !this.isActive
}
}
})
</script>
</html>
运行截图
总结
v-bind可以为属性绑定值
完整写法：v-bind:属性名="属性值"
简写为：:属性名="属性值"
v-for指令
作用
根据数据循环生成标签，并可以填充数据
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3>不带序号的前端路线</h3>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
<h3>带序号的前端路线</h3>
<ul>
<li v-for="(item,index) in arr">{{index + 1}}、{{item}}</li>
</ul>
<h3>对象类型数据</h3>
<p v-for="item in food">{{item.name}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
// 声明课程数组
arr:["HTML","CSS","JavaScript","jQuery"],
// 对象数据
food:[
{"name":"河南烩面"},
{"name":"陕西油泼面"}
]
}
})
</script>
</html>
运行截图
总结
v-for指令的作用是根据数据生成html列表结构
v-for经常和数组类型数据使用
语法是(item,index) in 数据
v-for指令案例
代码
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="list">
<button type="button" @click="add">添加课程</button>
<button type="button" @click="del">删除课程</button>
<p v-for="item in arr">{{item.name}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#list",
data:{
arr:[
{"name":"Coding课堂Vue课程"},
{"name":"Coding课堂React课程"},
{"name":"Coding课堂uni-app课程"}
]
},
methods:{
add:function(){
// 数组添加数据
this.arr.push({"name":"添加的Vue课程"})
},
del:function(){
// 数组删除数据
this.arr.shift()
}
}
})
</script>
</html>
截图
v-model指令
作用
设置和获取表单元素的值(双向数据绑定)
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="getMsg">获取数据</button>
<br>
<input type="text" v-model="msg"/>
<p>{{msg}}</p>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
msg:"Coding课堂"
},
methods:{
getMsg:function(){
alert(this.msg)
}
}
})
</script>
</html>
运行截图
总结
v-model指令可以便捷地设置和获取表单元素的值
绑定的数据回合表单元素值相关联，进行一个双向绑定
本节主要说了下Vue的一些常用指令，下一篇我们说几个Vue的实战案例，强化一下使用基础，欢迎持续关注。
本文若有任何看不懂，或者有错误的地方欢迎大家评论区留言，我时时关注哦
用你勤劳的双手点个赞吧，这将是我创作更多优质文章的动力！
文章转载自酉时Coding课堂，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。
