<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件进行格式化和位数限制</title>
</head>
<body>
<h2>事件机制</h2>
<div id="app">
<currency-input v-model="price"></currency-input>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('currency-input',{
template:`
<span>
$<input type="text" ref="in1" v-bind:value="val" v-on:put="updateValue($event.target.value)">
</span>
`,
props:['val'],
methods:{
updateValue:function (value1) {
let v1 = value1.trim().slice(0,value1.indexOf('.' + 3));
if ( v1 !== value1){
this.$refs.in1.value = v1;
}
this.$emit('put',Number(v1));
}
}
});
let vm = new Vue({
el:'#app',
data:{
price:10.123
}
})
</script>
</body>
</html>
06-13
633
08-24
3万+