提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

Vue常用指令

Vue
2023-04-18 14:27:43 时间

目录

v-text与v-html 

v-for

v-if条件渲染

v-for与v-if综合 

v-model双向数据绑定

v-on 绑定事件监听器 

综合小案例

效果

以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>

相关文章