<!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
>
