<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
[v-cloak]{
display: none;
}
input{
text-indent: 20px;
}
</style>
<body>
<div id="app" v-cloak>
<!-- disabled绑定当count==1时禁用 -->
<button :disabled="count===1" @click="--count">-</button><input @keydown.enter="show()" type="text" v-model.number.trim="count"><button @click="++count">+</button>
<h1>人民币{{count | fix}}</h1>
<h1>美元{{money | fix}}</h1>
<h1>日元{{jm | fix}}</h1>
<img :src="imgs" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm=new Vue({
el:"#app",
data:{
count:1,
imgs:''
},
computed:{
// 计算属性计算换算值
money(){
return this.count*15.7032
},
jm(){
return this.count*0.1455
}
},
filters:{
// 写一个过滤器
fix(val){
if(!val||isNaN(val)) val=0;
return val.toFixed(2)
}
},
watch:{
// 观察属性count每时每刻的变化
count(val){
if(!val||isNaN(val))
this.count=0;
if(val<2) this.count=1;
if(val>=10) this.count=10;
if(val===3){this.imgs="https://upload.jianshu.io/users/upload_avatars/20431003/a5a86df1-052d-4e14-bc7a-c9c0c6012353?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120"}else{
this.imgs=""
}
}
},
methods:{
show(){
alert('傻逼啊！点啥回车，这是数量选择器')
}
}
})
</script>
</body>
</html>
————————————写的不好，仅供参考
网友评论