- 小黑记事本小案例
<footer class="footer" >
<span class="todo-count" v-if="list.length!=0">
<strong>{{list.length}}</strong> items left
</span>
<button class="clear-completed" @click="clear" v-if="list.length!=0">
Clear
</button>
</footer>
</section>
<!-- 底部 -->
<footer class="info">
<p>
<a href="http://www.itheima.com/"><img src="../image/black.png" alt="" /></a>
</p>
</footer>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#todoapp",
data: {
list: ["写代码", "吃饭饭", "睡觉觉"],
inputValue: "好好学习,天天向上"
},
methods: {
add: function () {
this.list.push(this.inputValue);
},
remove:function(index){
console.log("删除");
console.log(index);
this.list.splice(index,1);
},
clear:function (){
this.list = []
}
},
})
</script>
</body>
</html>
- 购物车小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue实现购物车案例</title>
</head>
<body>
<div id="app">
<div v-if="items.length">
<h1> {{msg}} computed{{ counts }}</h1>
编号: <input type="text" v-model="item.id">
名称: <input type="text" v-model="item.name">
单价: <input type="text" v-model="item.price">
数量: <input type="text" v-model="item.count">
<button @click="addCount"> 添加到购物车 </button>
<br><br><br>
<table border="1">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in items" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><input type="button" value="-" @click="remove(index)"> {{item.count}} <input type="button" value="+" @click="add(index)"> </td>
<td>{{item.count * item.price}}</td>
<td><button @click="removeClick(index)">删除</button></td>
</tr>
</table>
<h3>总价格: {{ totalPrice }}</h3>
<h3>总价格: {{ totalPrice }}</h3>
<h3>总价格: {{ totalPrice }}</h3>
</div>
<h1 v-else>购物车为空</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data : {
count:0,
msg:'购物车案例',
item : {},
items:[
{id:1,name:'iphone12',price:4899,count:1,delete:"删除"},
{id:2,name:'redmik30pro',price:3199,count:1,delete: "删除"},
]
},
methods: {
add:function (idx){
this.items[idx].count++
},
remove:function (idx){
if (this.items[idx].count>1) {
this.items[idx].count--
} else {
alert('购买的商品不能少于一件')
}
},
addCount:function (){
if (!this.item.id){
alert('请输入编号');
return false
}
if (!this.item.name){
alert('请输入名称');
return false
}
if (!this.item.price){
alert('请输入价格');
return false
}
if (!this.item.count){
alert('请输入数量');
return false
}
if (!(this.item.count>0)){
alert('请输入正确数量');
return false
}
this.items.push(this.item)
},
removeClick(index){
this.items.splice(index,1)
}
},
computed : {
counts:function (){
return this.count+10
},
totalPrice:function (){
return this.items.reduce(function (pre,item){
return pre + item.price*item.count
},0)
},
}
})
</script>
</body>
</html>
|