Vue经典题⽬（合计总价、布局切换、TodoList待办、导航切换）这⾥分享⼀下Vue的⼏道经典题⽬(˃ ˂) 我这⾥⽤的js版本是 vue.js，其他版本的js也都可以!
⼀、合计总价
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>合计总价</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
[v-cloak]{
display: none;
}
*{
margin:0;
padding:0;
}
body {
font-family: Microsoft YaHei;
}
li {
list-style: none;
}
div {
width:400px;
background-color: #61a1bc;
margin:50px auto;
padding:35px 60px;
}
h1 {
font-size:44px;
text-align: center;
}
ul {
font-size:20px;
text-align: left;
margin:20px 015px;
}
ul li {
padding:20px 30px;
background-color: #E0C921;
margin-bottom:8px;
cursor: pointer;
}
ul li span {
float: right;
}
ul li.active {
background-color: #8ec16d;
p {
border-top:1px solid rgba(255,255,255,0.5);
padding:15px 30px;
font-size:20px;
text-align: left;
}
p span {
float: right;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!-- v-cloak指令保持在元素上直到关联实例结束编译后⾃动移除，v-cloak和CSS规则如[v-cloak]{ display: none }⼀起⽤时，这个指令可以隐藏未编译的Mustache 标签直到实例准备完毕。通常⽤来防⽌{{}}表达式闪烁问题--> <h1>Services</h1>
<ul>
<!--v-for遍历，绑定click监听，切换active-->
<!--将currency filter的写法更换为toFixed-->
<li v-for="item in items" @click="toggleActive(item)":class="{'active':item.active}">{{item.name}}<span>{{item.price | currency}}</span></li> </ul>
<p>Total:<span>{{total()| currency}}</span></p>
</div>
</body>
</html>
<script type="text/javascript">
var demo =new Vue({
el:'#app',
data:{
items:[{
name:'Web Development',
price:3000,
active:false
},{
name:'Python',
price:1000,
active:false
},{
name:'Java',
price:2000,
active:false
},{
name:'GO',
price:2200,
active:false
}]
},
methods:{
toggleActive:function(i){
i.active =!i.active;//简单的写法切换true/false
},
total:function(){
var total =0;
this.items.forEach(function(s){//⽤js的forEach遍历数组
if(s.active){
total += s.price;
}
});
return total;
}
}
});
</script>
⼆、布局切换(它的素材是从⽹上来的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>布局切换</title>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
[v-cloak]{
display: none;
}
*{
margin:0;
padding:0;
}
body {
font-family: Microsoft YaHei;
}
li {
list-style: none;
}
.
bar {
background-color: #5c9bb7;
border-radius:2px;
width:580px;
padding:10px;
margin:45px auto 25px;
position: relative;
text-align: right;
line-height:1;
}
.bar a {
background: #4987a1 center center no-repeat;
width:32px;
height:32px;
display: inline-block;
text-decoration: none !important;
margin-right:5px;
border-radius:2px;
cursor: pointer;
}
.bar a.active {
background-color: #c14694;
}
.bar a.list-icon {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZ SBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5 UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3Nywg MjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgt bnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaH R0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZi MiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkYzNkFCQ0ZBMTBCR
TExRTM5NDk4RDFEM0E5RkQ1NEZCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkYzNkFCQ0ZCMTBCRTExRTM5NDk4RDFEM0E5RkQ1NEZCIj4gP HhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RjM2QUJDRjgxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiIHN0UmVmO mRvY3VtZW50SUQ9InhtcC5kaWQ6RjM2QUJDRjkxMEJFMTFFMzk0OThEMUQzQTlGRDU0RkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4 gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7h1bLqAAAAWUlEQVR42mL8BwYGBn4GCACxBRlIAIxAA/4jaXoPEkMyjJ+A/g9MDJQBRhYg8RFqMwg 8RJIUINYLFDmBUi+ADQAF1n8ofk9yIAy6WPg4GgtDMRYAAgwAdLYwLAoIwPgAAAAASUVORK5CYII=);
}
.id-icon {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZ SBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5 UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3Nywg MjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgt bnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaH R0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZi MiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjBEQkMyQzE0MTBCRj ExRTNBMDlGRTYyOTlBNDdCN0I4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjBEQkMyQzE1MTBCRjExRTNBMDlGRTYyOTlBNDdCN0I4Ij4gPHhtcE1 NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MERCQzJDMTIxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiIHN0UmVmOmRvY3V tZW50SUQ9InhtcC5kaWQ6MERCQzJDMTMxMEJGMTFFM0EwOUZFNjI5OUE0N0I3QjgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94 OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4MjPshAAAAXklEQVR42mL4h/8I8B6IGaCYKHFGEMnAwCDIAAHvgZgRyiZKnImBQsACxB+hNoDAQyQ5osQ ZIT4gH1DsBZABH6AB8x/JaQzEig++WPiII7Rxio/GwmCIBYAAAwAwVIzMp1R0aQAAAABJRU5ErkJggg==);
}
width:570px;
margin:0 auto;
text-align: left;
}
padding:2px;
float: left;
}
width:280px;
height:280px;
object-fit: cover;
display: block;
border: none;
}
ul.list {
width:500px;
margin:0 auto;
text-align: left;
}
ul.list li {
border-bottom:1px solid #ddd;
padding:10px;
overflow: hidden;
}
ul.list li img {
width:120px;
height:120px;
float: left;
border: none;
}
ul.list li p {
margin-left:135px;
font-weight: bold;
color: #6e7a7f;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="bar">
<!--绑定class的⽤法，并且通过click改变layout属性-->
<a class="grid-icon":class="{ 'active': layout == 'grid'}" @click="layout = 'grid'"></a>
<a class="list-icon":class="{ 'active': layout == 'list'}" @click="layout = 'list'"></a>
</div>
<ul v-if="layout == 'grid'"class="grid">
<li v-for="a in articles">
<a :href="a.url" target="_blank"><img :src="a.image.large"/></a>
</li>
</ul>
<ul v-if="layout == 'list'"class="list">
<li v-for="a in articles">
<a :href="a.url" target="_blank"><img :src="a.image.small"/></a>
<p>{{a.title}}</p>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var vm =new Vue({
el:'#app',
data:{
layout:'grid',
articles:[{
"title":"⼉童社交的爱与痛（套装全2册）",
"url":"/25189806.html",
"image":{
"large":"/48/21/25189806-1_w_7.jpg",
"small":"/48/21/25189806-1_w_7.jpg"
}
},
{
"title":"刘墉⼝才⼤师经典套装(畅销30年超值珍藏版)",
"url":"/23995236.html",
"image":{
"large":"/12/33/23995236-1_w_6.jpg",
"small":"/12/33/23995236-1_w_6.jpg"
}
},
{
"title":"丹·布朗作品系列：本源",
"url":"/25253662.html",
"image":{
"large":"/49/15/25253662-1_w_3.jpg",
"small":"/49/15/25253662-1_l_3.jpg"
}
},
{
"title":"⾼兴死了（我正在⼈⽣低⾕，我现在⾼兴死了！）",
"url":"/25245058.html",
"image":{
"large":"/58/32/25245058-1_w_4.jpg",
"small":"/58/32/25245058-1_l_4.jpg"
}
},
{
"title":"谈判：如何在博弈中获得更多(第四版)Everything is Negotiable",
"url":"/25247638.html",
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议