学习vue的第4天，v-on，v-if，v-else，v-show等

最新推荐文章于 2022-05-25 11:15:34 发布

veinYutc

最新推荐文章于 2022-05-25 11:15:34 发布

阅读量131

点赞数 2

文章标签：学习

本文链接：https://blog.csdn.net/qq_34176561/article/details/124960565

版权

v-on的基本使用 v-on的参数传递，v-on的修饰词 v-on扩展条件判断（v-if，v-else，v-else-if）v-if发demo理解，v-show以及v-show

v-on的基本使用

做一个点击加减的小案例

v-on参数的传递

@click=“btn( xxx )” 这里的xxx是实参

1，如果需要传参，在页面中传的是实参，在methods中写的是形参

2.如果在页面中没有写实参，但是留有括号，在methods写了形参，会打印undefined

3.如果在页面中没有写实参，也没写括号，在methods中写了形参，打印的是event

4.如果想同时船事件和参数，那在页面下写的第一个参数是$event,第二个是参数

5.如果只船事件，name页面中可以不写括号，或者($event)

重点的有：.stop .prevent

阻止冒泡

给按钮@click.stop="btn"

@click.prevent=" " 阻止默认事件

可以串联写法，@click.stop.prevent=" "

.once只触发一次

.按键修饰符

@click.keyup.xxxx 按键

最外层写Vue.config.keyCodes.huiche = 13

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="vm">
			<div @click="">
				<span>{{num}}</span>
				<input type="button" value="+" @click="add">
				<input type="button" value="+" @click="btn"><br><br>
				
				<div @click.stop="divStop">
					<input type="button" value="冒泡" @click.stop="butStop">//阻止事件冒泡
				</div>
				<div @click.prevent.stop="divStop">
					<input type="button" value="冒泡" @click.prevent.stop="butStop">//阻止默认事件
				</div><br>
				<form action="www.baidu.com" method="GET">
					<button @click.stop.prevent="">点击到百度</button>//可以写在一起，不跳转到百度
				</form>
				
				
			</div>
		</div>
		<script src="../vue.js"></script>
		<script>
			const vm = new Vue({
				el: '#vm',
				data() {
					return {
						num:0
					}
				},
				methods: {
					//num的加减
					add(){
						this.num++
					},
					btn(){
						this.num--
					},
					butStop(){
						console.log('but')
					},
					divStop(){
						console.log('div')
					}
				},
				
			})
		</script>
	</body>
</html>

接下来是一个简易购物车的案例

在固定数据的基础上，写了删除商品，增加数量和计算总价格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}

			li {
				/* width: 150px; */
				width: 200px;
				margin:0px 30px;
				text-align: center;
				line-height: 40px;
			}

			.title {
				background-color: #F7F7F7;
				display: flex;
				justify-content: space-between;
				color: #5F6E96;
				/* margin-left: 30px; */
				width: 1200px;
				height: 40px;
				font-weight: 800;
				box-sizing: border-box;

			}
			
			.footer{
				background-color: #fff;
				width: 1200px;
				/* border: #5F6E96 1px solid; */
				display: flex;
				justify-content: space-between;
			}
			.footer li{
				margin-top: 20px;
				width: 200px;
				font-size: 20px
			}
			input{
				width: 50px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<div id="vm">
			<div>
				<ul class="title">
					<li>游戏名称</li>
					<li>出版日期</li>
					<li>价格</li>
					<li>购买量</li>
					<li>操作</li>
				</ul>
			</div>
			<div class="">
				<ul class="footer" v-for="(book,index) in books">
						
						<li>{{index+1}}{{books[index].bookname}}</li>
						<li>{{books[index].days}}</li>
						<li>{{books[index].good}}元</li>
						<li>
							<input type="button" value="-" @click="checkLow(index)" :disabled="impose(index)">
							{{books[index].num}}个
							<input type="button" value="+" @click="checkAdd(index)">
						</li>
						<li><input type="button" value="删除" @click="changeHidn()"></li>
	
				</ul>
			</div>
			<h3>总价是：{{total}}元</h3>
			
		</div>

		<script src="../vue.js"></script>
		<script>
			const vm = new Vue({
				el: "#vm",
				data() {
					return {
						books: [{
								bookname: '《孤岛惊魂6》',
								days: "2021-9",
								good: 200,
								num: 1
							},
							{
								bookname: '《行尸走肉1》',
								days: '2007-9',
								good: 100,
								num: 1
							},
							{
								bookname: '《看门狗2》',
								days: '2021-9',
								good: 300,
								num: 1
							},
							{
								bookname: '《消失的光芒2》',
								days: '2022-2',
								good: 250,
								num: 1
							},
						]
					}
				},
				methods: {
					checkAdd(index){
						this.books[index].num++
					},
					checkLow(index){
						this.books[index].num--
					},
					changeHidn(index){
						this.books.splice(index+1,1)
					},
					impose(index){
						return this.books[index].num <= 0
					}
					
				},
				computed: {
					total(){
						let goods = 0;
						this.books.map(item=>{
							goods += item.good * item.num
						});
						return goods
					},
					
					
				},
				watch: {

				}
			})
		</script>
	</body>
</html>

veinYutc

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习vue的第4天，v-on，v-if，v-else，v-show等

v-on的基本使用 v-on的参数传递，v-on的修饰词 v-on扩展条件判断（v-if，v-else，v-else-if）v-if发demo理解，v-show以及v-showv-on的基本使用做一个点击加减的小案例v-on参数的传递@click=“btn( xxx )” 这里的xxx是实参1，如果需要传参，在页面中传的是实参，在methods中写的是形参2.如果在页面中没有写实参，但是留有括号，在methods写了形参，会打印undefined3.如果在页面中没有写实参，也没
复制链接

扫一扫