vue一个简单的计算器

6 篇文章 0 订阅
<!DOCTYPE html >
< html >

< head >
< meta charset= "utf-8" />
< meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
< title >Page Title </ title >
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< script src= "https://cdn.bootcss.com/vue/2.2.2/vue.min.js" > < / script >
</ head >
< style >
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}

input[ type= "number" ] {
-moz-appearance: textfield;
}
< / style >

< body >
< div id= "app" >
< div v-for= "item in items" >
< span >{{item.value}} </ span >

< input type= "number" v-model:value= "item.name" lazy number >
</ div >
计算值:{{total}}
</ div >
</ body >
< script >
// 过滤器
Vue. filter( 'capitalize', function ( value) {
if (! value) return ''
value = value. toString()
return value. charAt( 0). toUpperCase() +
value. slice( 1)
})
var vm = new Vue({
el: "#app",
data: {
items: [{
name: "1",
value: "a"
}, {
name: "2",
value: "b"
}, {
name: "3",
value: "c"
}]
},
computed: {
total : function () {
self = this
let m = 0;
console. log( self. items. length)
for ( var i = 0; i < self. items. length; i++) {
m = m * 1 + self. items[ i]. name * 1;
}
return m;
}
}

})
< / script >

</ html >

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值