点赞多大胆，就有多大产！开源促使进步，献给每一位技术使用者和爱好者！
干货满满，摆好姿势，点赞发车
路漫漫其修远兮，吾将上下而求索
前言
本章节咱们来说一下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">
<!-- 比较固定写法，写true或者false -->
<!-- <img src="./img/xiaozhuang.jpg" v-show="false"> -->
<!-- 使用变量 与js中的flag变量绑定，为true则显示，false则隐藏-->
<img src="./img/xiaozhuang.jpg" v-show="flag">
<!-- 使用变量和判断表达式，age与下方变量绑定，条件成立时则显示，否则不显示 -->
<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>
<!-- 绑定flag状态，控制是否显示 -->
<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">
<!-- 按钮控制切换状态，绑定isShow函数 -->
<button type="button" @click="isShow">点我切换状态</button>
<!-- v-if -->
<p v-if="show">v-if控制是否显示</p>
<!-- v-show -->
<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="图片地址">
<!--bind指令-->
<img v-bind:src="vue变量">
<!-- 或省略v-bind -->
<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">
<!--
v-bind:src 设置图片地址，和vue中imgSrc变量对应
:class 为简写形式，控制是否添加样式
-->
<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>
<!-- 使用index获取索引，从0开始 -->
<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>
<!-- 使用v-model绑定msg变量 -->
<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的实战案例，强化一下使用基础，欢迎持续关注。
本文若有任何看不懂，或者有错误的地方欢迎大家评论区留言，我时时关注哦
扫一扫
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
