Vue学习记录(Day.3)

最新推荐文章于 2025-03-05 13:20:37 发布

mingmengx

最新推荐文章于 2025-03-05 13:20:37 发布

阅读量348

点赞数 2

本文链接：https://blog.youkuaiyun.com/mingmengx/article/details/103565134

版权

通过案例加深对Vue的学习

案例一：页面显示一组电影列表，通过点击实现该电影的变色

1.通过v-for实现数组的循环同时获取元素的下标index和值item

2.增加变量currentIndex用来记录选中对象

3.通过对象动态添加效果，当currentIndex==index时添加效果

4.监听点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		.active{
			color: red;
		}
	</style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in movies"
			:class="{active:currentIndex==index}" @click="liClick(index)">
			{{index}}-{{item}}
		</li>
    </ul>
	
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            movies:['海王','宙斯','雷神','海拉'],
			currentIndex:0
        },
		methods:{
			liClick(index){
				this.currentIndex=index
			}
		}
    })
</script>

</body>
</html>

案例二：用户登陆切换案例

v-if v-else-if v-else

添加一个布尔值isUser当isUser:true时显示账户登陆，当isUser:false时显示邮箱登陆

通过按钮改变isUser的值实现用户登陆切换(@click="isUser=!isUser")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	<span v-if="isUser">
		<label for="username">用户账户</label>
		<input type="text" id="username" placeholder="用户账户" />
	</span>
	<span v-else>
		<label for="email">用户邮箱</label>
		<input type="text" id="email" placeholder="用户邮箱" />
	</span>
	<button @click="isUser=!isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',//挂载要管理的元素
        data:{//定义数据
            isUser:true
        }
    })
</script>

</body>
</html>

由于存在input复用的问题可以通过添加key值来解决

三：购物车案例

案例解释与原理附在代码注释中

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Title</title>
		<link rel="stylesheet" href="indexStyle.css" />
	</head>
	<body>
		<div id="app">
			<!-- 如果购物车中有数据就显示不然就显示购物车为空 -->
			<div v-if="books.length">
				<table>
					<thead>
						<tr>
							<th></th>
							<th>书籍名称</th>
							<th>出版日期</th>
							<th>价格</th>
							<th>购买数量</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<!-- 循环获取数组元素和对应下标 -->
						<tr v-for="(item,index) in books">
							<!-- 获取商品id -->
							<td>{{item.id}}</td>
							<!-- 获取商品名 -->
							<td>{{item.name}}</td>
							<!-- 获取商品时间 -->
							<td>{{item.date}}</td>
							<!-- <td>{{getFinalPrice(item.price)}}</td> -->
							<!-- 获取商品价格，通过过滤器实现保留两位小数 -->
							<td>{{item.price | showPrice}}</td>
							<td>
								<!-- 当商品数量<=1时无法进行-操作  -->
								<button @click="decrement(index)" v-bind:disabled="item.count<=1">-</button>
								{{item.count}}
								<button @click="increment(index)">+</button>
							</td>
							<td>
								<button @click="removeHandle">移出</button>
							</td>
						</tr>
					</tbody>
				</table>
				<!-- 获取商品总价格，通过过滤器实现保留两位小数 -->
				<h2>总价格:{{totalPrice | showPrice}}</h2>
			</div>
			<h2 v-else>购物车为空</h2>
		</div>
		<script src="../js/vue.js"></script>
		<script src="main.js"></script>
	</body>
</html>

indexStyle.css

table{
	border: 1px solid #e9e9e9;
	border-collapse: collapse;
	border-spacing: 0;
}

th,td{
	padding: 8px 16px;
	border: 1px solid #e9e9e9;
	text-align: left;
}

th{
	background-color: #f7f7f7;
	color: #5c6b77;
	font-weight: 600;
}

main.js

const app=new Vue({
	el:'#app',
	data:{
		books:[
			{
				id:1,
				name:'<<算法导论>>',
				date:'2006-9',
				price:85.00,
				count:1
			},
			{
				id:2,
				name:'<<java高级编程>>',
				date:'2006-2',
				price:59.00,
				count:1
			},
			{
				id:3,
				name:'<<Linux编程艺术>>',
				date:'2008-10',
				price:39.00,
				count:1
			},
			{
				id:4,
				name:'<<编程珠玑>>',
				date:'2006-3',
				price:128.00,
				count:1
			},
		]
	},
	methods:{
		// getFinalPrice(price){
		// 	return '￥'+price.toFixed(2)
		// }
		/* 监听按钮实现数量+ */
		increment(index){
			//console.log('increment')
			this.books[index].count++
		},
		/* 监听按钮实现数量- */
		decrement(index){
			//console.log('decrement')
			this.books[index].count--
		},
		/* 监听按钮实现移除 */
		removeHandle(index){
			this.books.splice(index,1)
		}
		
	},
	/* 遍历获取每个商品的总价,最终获取所有商品总价 */
	computed:{
		totalPrice(){
			let totalPrice=0
			for(let i=0;i<this.books.length;i++){
				totalPrice +=this.books[i].price*this.books[i].count
			}
			return totalPrice
			
			
		}
	},
	/* 过滤器 */
	filters:{
		showPrice(price){
			return '￥'+price.toFixed(2)
		}
	}
})

效果图