您的位置：首页 > Web前端 > Vue.js

Vue学习记录(Day.3)

2020-01-12 20:58 344 查看

通过案例加深对Vue的学习

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

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

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

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

4.监听点击事件

[code]<!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")

[code]<!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

[code]<!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

[code]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

[code]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)
}
}
})

效果图

点赞 2
收藏
分享
文章举报

mingmengx 发布了9 篇原创文章 · 获赞 7 · 访问量 2108 私信关注

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航