Vue常用指令
Posted 猪八戒1.0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue常用指令相关的知识，希望对你有一定的参考价值。
目录
以v开头的指令
v-text 等价 但不能渲染html
v-html 与v-text非常相似但能渲染html
v-for 列表渲染也称循环渲染
<标签 v-for="(当前项，当前项索引) in 数据集合">当前项 当前项索引+1</标签>
v-text与v-html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js</title>
</head>
<body>
<div id="app">
nickName
<div v-text="str"></div>
<div v-html="str"></div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue(
el:"#app",
data:
nickName:"熊哥哥",
str:"<h2>这是一个h2标签</h2>"
);
</script>
</html>
v-for
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in stuList">index+1---item</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el:"#app",
data:
stuList:["张三","李四","王五"]
);
</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h5 v-for="(item,index) in 5">我是熊哥哥---item---index</h5>
<ul>
<li v-for="(item,index) in 5">item*5</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el:"#app",
data:
);
</script>
</html> 
在js语法里，[]代表的是数组，代表的是对象
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for列表渲染</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in stuList">
index+1.
item.name----
item.sex=="男"?"儿子伢":"姑娘伢"----
item.age岁
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el: "#app",
data:
stuList: [
name: "胡哥",
sex: "男",
age: 18
,
name: "彭哥",
sex: "男",
age: 20
,
name: "标哥",
sex: "男",
age: 21
,
name: "刘姐",
sex: "女",
age: 22
]
);
</script>
</html>
<!--
在JS的语法里在，如果碰到到了[]代表的就是数组
如果是就代表对象
-->
v-if条件渲染
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if列表渲染</title>
</head>
<body>
<div id="app">
<h5 v-if="true">熊哥真帅</h5>
<h5 v-else>熊哥不帅</h5>
<hr />
<h4 v-if="age<16">少年</h4>
<h4 v-else="age>=16&&age<=20">青年</h4>
<h4 v-else="age>=21&&age<=50">成年</h4>
<h4 v-else="age>50">老年</h4>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el:"#app",
data:
age:21
);
/*
这是以前的dom操作方式
var aaa=document.getElementById("aaa");
aaa.remove(); */
</script>
</html>
<!--
-->v-for与v-if综合
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
</tr>
<tr v-for="(item,index) in stuList" v-if="item.age>20" bgcolor="#ffff00">
<td >item.name</td>
<td >item.sex</td>
<td >item.age</td>
<td >
<span v-for="(item1,index1) in item.hobby" v-if="index1==0">item1</span>
<span v-else>,item1</span>
</td>
</tr>
<tr v-else>
<td >item.name</td>
<td >item.sex</td>
<td >item.age</td>
<td >
<span v-for="(item1,index1) in item.hobby" v-if="index1==0">item1</span>
<span v-else>,item1</span>
</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el: "#app",
data:
stuList: [
name: "张珊",
sex: "女",
age: 18,
hobby: ["看书", "睡觉"]
,
name: "李四",
sex: "男",
age: 22,
hobby: ["打游戏", "逛街"]
,
name: "王五",
sex: "男",
age: 19,
hobby: ["吃", "喝"]
,
name: "赵六",
sex: "男",
age: 45,
hobby: ["干活"]
]
);
</script>
</html>
v-model双向数据绑定
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>家庭作业讲解</title>
</head>
<body>
<div id="app">
<h2 v-if="flase">1班</h2>
<h2 v-else>2班</h2>
<h2 v-show="true">1班</h2>
<hr>
<input type="text" value="标哥哥"/>
<hr>
<input type="text" v-model="nickName"/>
<hr>
nickName
<hr>
<input type="range" v-model="age" max="100" min="0"/>
age
<hr>
<input type="radio" value="少爷" name="sex" v-model="gender">男
<input type="radio" value="公主" name="sex" v-model="gender"/>女
<hr/>
你选择的性别是：gender
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue(
el: "#app",
data:
nickName:"标哥哥",
age:18,
gender:"少爷"
)
</script>
</html>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model的修饰符</title>
<style>
input
width: 80px;
</style>
</head>
<body>
<div id="app">
<input type="text" v-model.trim="nickName">
nickName.length
<hr>
<input type="text" v-model.lazy="nickName">
nickName
<hr />
<input type="range" v-model.number="volume" min=100 max=200>volume
typeof volume
<hr />
<input type="text" v-model.number="a">
+
<input type="text" v-model.number="b">
结果：a+b
<hr>
a的数据类型：typeof a
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue(
el: "#app",
data:
nickName:"",
volume:150,
a:"",
b:""
)
</script>
</html>v-on 绑定事件监听器
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1>msg</h1>
<button type="button" v-on:click="sayHello">按钮一</button>
<button type="button" @click="sayHello">按钮二</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue(
el: "#app",
data:
msg:"维哥"
,
//定义函数
methods:
sayHello:function()
this.msg="璋哥"
)
</script>
</html>v-on可简写@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind的案例</title>
<style>
.img-box
width: 639px;
height: 426px;
border: 2px solid red;
/* 父级元素相对定位 */
position: relative;
.img-box img
/* 子级元素使用绝对定位 */
position: absolute;
left: 0;
top: 0;
</style>
</head>
<body>
<div id="app">
<div class="img-box">
<!-- <img src="img/item1.jpg" alt=""> -->
<!-- 请使用v-for遍历imgList生成图片 -->
<img v-show="currentIndex==index"
v-for="(item,index) in imgList"
:src="item" alt="">
</div>
<button type="button" :disabled="currentIndex==0" @click="prev">上一张</button>
<button type="button" :disabled="currentIndex==3" @click="next">下一张</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue(
el: "#app",
data:
//假设我想显示第1张，数据驱动页面
//currentIndex代表要显示哪一张图片
currentIndex:0,
imgList:[
"img/item1.jpg",
"img/item2.jpg",
"img/item3.jpg",
"img/item4.jpg"
]
,
methods:
prev:function()
// if(this.currentIndex==0) this.currentIndex=3;
this.currentIndex--;
,
next:function()
// if(this.currentIndex==3) this.currentIndex=0;
this.currentIndex++;
)
</script>
</html>
也可以写在@click内
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind的案例</title>
<style>
.img-box
width: 639px;
height: 426px;
border: 2px solid red;
/* 父级元素相对定位 */
position: relative;
.img-box img
/* 子级元素使用绝对定位 */
position: absolute;
left: 0;
top: 0;
</style>
</head>
<body>
<div id="app">
<div class="img-box">
<!-- <img src="img/item1.jpg" alt=""> -->
<!-- 请使用v-for遍历imgList生成图片 -->
<img v-show="currentIndex==index"
v-for="(item,index) in imgList"
:src="item" alt="">
</div>
<button type="button" :disabled="currentIndex==0" @click="currentIndex--">上一张</button>
<button type="button" :disabled="currentIndex==3" @click="currentIndex++">下一张</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue(
el: "#app",
data:
//假设我想显示第1张，数据驱动页面
//currentIndex代表要显示哪一张图片
currentIndex:0,
imgList:[
"img/item1.jpg",
"img/item2.jpg",
"img/item3.jpg",
"img/item4.jpg"
]
)
</script>
</html>
综合小案例
效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算属性案例</title>
<style>
.page-title
text-align: center;
.table-shopcar
border: 1px solid black;
margin: auto;
width: 500px;
border-collapse: collapse;
.table-shopcar :where(td, th)
border: 1px dotted black;
</style>
</head>
<body>
<div id="app">
<h2 class="page-title">购物车列表</h2>
<table class="table-shopcar">
<tr>
<th>序号</th>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr v-for="(item,index) in goodsList">
<td>index+1</td>
<td>item.goodsName</td>
<td>item.price</td>
<td>
<button :disabled="item.count==1" @click="item.count--">-</button>
item.count
<button @click="item.count++">+</button>
</td>
<td>item.count*item.price</td>
</tr>
</table>
<h3 style="text-align: center;">商品总数:num件,商品总金额:sum元</h3>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
new Vue(
el: "#app",
data:
goodsList: [
goodsName: "iphone 14",
price: 4999,
count: 1
,
goodsName: "充电宝",
price: 129,
count: 3
,
goodsName: "数据线",
price: 13,
count: 2
,
goodsName: "红米手机",
price: 1999,
count: 2
]
,
computed:
num:function()
var result=0;
for(var i=0;i<this.goodsList.length;i++)
result+=this.goodsList[i].count;
return result;
,
sum:function()
var result=0;
for(var i=0;i<this.goodsList.length;i++)
result+=this.goodsList[i].price*this.goodsList[i].count;
return result;
);
</script>
</html>
以上是关于Vue常用指令的主要内容，如果未能解决你的问题，请参考以下文章