1.代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app li{
list-style: none;
border:1px solid #ccc;
margin-bottom: 10px;
padding: 6px;
width: 300px;
}
</style>
</head>
<body>
<div id="app">
<h2 v-if="goods.length">
一共有{{goods.length}}種商品
</h2>
<h2 v-else>
沒有任何商品轨香！
</h2>
<input v-model.lazy.trim="msg" focus>
<button @click="add()">增加商品</button>
<ul>
<template v-for="(v,i) in goods">
<li>{{i+1}} {{v}} <button @click="del(i)">刪除</button></li>
</template>
</ul>
</div>
<script src="./vue.js"></script>
<script>
var vm=new Vue({
el: "#app",
data: {
msg: '',
goods:['蘋果','橘子','香蕉','芒果'],
},
methods: {
del:function(index){
this.goods.splice(index,1);
},
add(){
if(this.msg!=""){
this.goods.push(this.msg);
this.msg="";
}
}
}
});
</script>
</body>
</html>
-
預(yù)覽效果
1.png
2.代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>購物車</title> <style> ul{list-style: none;} #app li{ height: 30px; padding: 10px; margin: 10px; border: 1px solid #ccc; } #app span{ width: 50px; background: green; color: #fff; margin-left: 10px; display:inline-block; line-height: 26px; text-align: center; font-size: 14px; } #app span:nth-child(4){ margin-right: 200px; } </style> </head> <body> <div id="app"> <h2>購物車</h2> <ul> <template v-for="(v,i) in goods"> <li> <span>{{v.name}}</span> <span>{{v.price}}</span> <span>{{v.count}}</span> <span>{{v.desc}}</span> <button @click="add(i)">增加</button> <button v-on:click="minus(v)" :disabled="v.count==0">減少</button> <button @click="del(i)">刪除</button> </li> </template> </ul> <h2>總價(jià)格: {{total()}}</h2> <h2>總價(jià)格: {{all}}</h2> </div> <script src="./vue.js"></script> <script> var vm=new Vue({ el:"#app", data:{ goods:[{name:"蘋果",price:5.5,count:2,desc:"desc"}, {name:"香蕉",price:6.5,count:3,desc:"desc"}, {name:"西瓜",price:3.5,count:10,desc:"desc"}, {name:"梨",price:7.5,count:9,desc:"desc"}] }, methods :{ add:function(index){ this.goods[index].count++; }, minus:function(item){ item.count--; }, del:function(index){ this.goods.splice(index,1); }, total:function(){ let sum=0; for (let i=0;i<this.goods.length;i++){ sum+=this.goods[i].price*this.goods[i].count; } return sum; } }, computed:{ all:function(){ let sum=0; for (let i=0;i<this.goods.length;i++){ sum+=this.goods[i].price*this.goods[i].count; } return sum; } } }); </script> </body> </html> -
預(yù)覽效果2.png
3.代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table,td{ border:1px solid blue; border-collapse: collapse; } table,fieldset{ width: 700px; margin: 20px auto; text-align: center; } #a{ background-color: blueviolet; } </style> </head> <body> <div id="app"> <fieldset> 商品名稱:<input type="text" v-model="newgoods.name"> 商品價(jià)格:<input type="text" v-model="newgoods.price"> <button @click="add()">增加商品</button> </fieldset> <table> <tr id="a"> <th>商品序號</th> <th>商品名稱</th> <th>商品價(jià)格</th> <th>刪除商品</th> </tr> <tr v-for="(v,i) in goods"> <td>{{i+1}}</td> <td>{{v.name}}</td> <td>{{v.price}}</td> <td><button @click="del(i)">刪除</button></td> </tr> </table> </div> <script src="./vue.js"></script> <script> var vm=new Vue({ el:"#app", data:{ goods:[{id:1,name:"張三",price:16}], newgoods:{ id:0, name:'', price:'' } }, methods:{ add:function(){ var maxid=0; for(var i=0;i<this.goods.length;i++){ if(maxid<this.goods[i].id){ maxid=this.goods[i].id; } } this.newgoods.id=maxid+1; console.log(this.newgoods) this.goods.push(this.newgoods); this.newgoods={}; }, del:function(index){ this.goods.splice(index,1); } } }); </script> </body> </html> -
預(yù)覽效果3.png
4.代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>todo-list</title> <style> .box{ width: 800px; height: 30px; padding: 10px; margin: 10px; border:1px solid #ccc; } .box span{ display: inline-block; width:150px; background-color: #030; color: #fff; text-align: center; line-height: 26px; } .box button{ display: none; float: right; } .box:hover button{ display: inline-block; } .name{ width: 150px; display: none; } .cur .name{ display: inline-block; } .cur span{ display: none; } .cur{ border-color: #c00; } </style> </head> <body> <div id="app"> <h2>todo-list</h2> <div id="form"> <input v-model="input" @keydown.enter="add"> <button @click="add">增加</button> </div> <div v-for="(v,i) in list" class="box" :class="{cur:index==i}"> <input type="checkbox" v-model="v.done" > <span @dblclick="update(i)">{{v.name}}</span> <!-- 雙擊事件 --> <input v-model="v.name" class="name" @keyup.enter="save(i)" @blur="save(i)" @keyup.esc="undo(i)"> <button @click="del(i)">刪除</button> </div> <h2>已選擇:{{all}}</h2> <h2>未選擇:{{this.list.length-all}}</h2> </div> <script src="./vue.js"></script> <script> var vm=new Vue({ el:"#app", data:{ list:[{name:"xzh",done:false}, {name:"薛忠海",done:false}, {name:"xuezhonghai",done:false}, {name:"xue",done:false}], index:-1, input:"", before:"" }, methods:{ add:function(){ if(this.input=="")return; let item={ name:this.input, done:false }; this.list.push(item); this.input=""; }, del:function(index){ this.list.splice(index,1); }, update:function(i){ this.index=i; this.before=this.list[i].name; }, save:function(i){ this.index=-1; }, undo:function(i){ this.list[i].name=this.before; this.before=""; this.index=-1; } }, computed:{ all:function(){ let sum=0; for(let i=0;i<this.list.length;i++){ if(this.list[i].done==true){ sum+=1; } } return sum; } } }); </script> </body> </html> -
預(yù)覽效果4.png
