做一个购物加减系统
<!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>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
display: flex;
}
ul li{
margin-left: 50px;
width: 100px;
height: 50px;
border: 1px solid red;
line-height: 50px;
text-align: center;
}
.action{
background: orange;
}
.con{
margin: 100px;
}
.con button{
width: 30px;
height: 30px;
}
.con input{
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li @click = "actoveIndex =i"v-for="item,i in list" :class="{action:i === actoveIndex}">
{{item}}
</li>
</ul>
<div class="con">
<button @click="count--" :disabled="count===1">-</button>
<input type="text " v-model = "count">
<button @click="count++" :disabled="count===6">+</button>
</div>
总价：{{toralPrice}}
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
//计算的方法放进computed
computed:{
toralPrice(){
return this.count*this.list[this.actoveIndex]
}
},
//监听值
watch: {
count(val){
console.log(val);
if(!val) val = 1
if(isNaN(val)) this.count=1
if(!Number.isInteger(val))
val = parseInt(val)
if(val>6) val = 6
if(val<1) val = 1
this.count = val
}
},
data(){
return{
actoveIndex:0,
list :[360,550,650,120,450,100,320],
count:1
}
},
mounted() {
},
methods: {
},
})
</script>
</body>
</html>
