前端必备-Vue系列2-Vue常用指令和简单案例
点赞多大胆，就有多大产！开源促使进步，献给每一位技术使用者和爱好者！
干货满满，摆好姿势，点赞发车
路漫漫其修远兮，吾将上下而求索
前言
本章节咱们来说一下Vue中常用的指令，不废话直接上干货
v-show
作用
根据表达值的真假，切换元素的显示和隐藏
代码
<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属性，实现显示隐藏
小案例：点击按钮实现显示/隐藏
代码
<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效果一样，通过真假控制页面是否显示指定元素
代码
<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>
案例代码
<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指令
作用
根据数据循环生成标签，并可以填充数据
代码
<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指令
作用
设置和获取表单元素的值(双向数据绑定)
代码
<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的实战案例，强化一下使用基础，欢迎持续关注。
本文若有任何看不懂，或者有错误的地方欢迎大家评论区留言，我时时关注哦