Open ccforward opened 7 years ago
Vue.component('currency-input', {
template: '\
<span>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
>\
</span>\
',
props: ['value'],
methods: {
// 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制
updateValue: function (value) {
var formattedValue = value
// 删除两侧的空格符
.trim()
// 保留 2 小数位
.slice(
0,
value.indexOf('.') === -1
? value.length
: value.indexOf('.') + 3
)
// 如果值不统一,手动覆盖以保持一致
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通过 input 事件发出数值
this.$emit('input', Number(formattedValue))
}
}
})
官网例子中有这个例子
不是很明白这个if里面的事情,因为我理解后面$emit更新后,input的value会跟着变,是不是多此一举了?
// 如果值不统一,手动覆盖以保持一致
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通过 input 事件发出数值
this.$emit('input', Number(formattedValue))
大哥,这个难了点, 据说v-model是语法糖,,
// App.vue
<template>
<div class="wrap">
<v-input id="s1" v-model="selected"/>
<v-input id="s2" v-model="selected"/>
<v-input id="s3" v-model="selected"/>
<v-input id="s4" v-model="selected"/>
{{selected}}
</div>
</template>
<script>
import Input from './Input.vue';
export default {
components: {Input},
data:()=>({
selected: []
})
}
</script>
// Input.vue 组件文件
<template id='input'>
<label :for="id">
<input type="checkbox" :checked="checkVal()" :id='id' @input="updateValue">
<slot />
</label>
</template>
<script>
export default {
name:'v-input',
model: {
prop: 'selected',
event: 'input'
},
props: {
id: {
type: String,
required: true
// default: '需要一个独一无二的id'+ ~~(Math.random()*1000) + 999
},
selected: {},
},
methods: {
checkVal(){
return this.selected.includes(this.id)
},
updateValue(e) {
let newVal = [...this.selected]
if (e.target.checked) {
newVal.push(this.id)
} else {
newVal.splice(newVal.indexOf(this.id), 1)
}
this.$emit('input', newVal)
}
}
};
</script>
Vue.component('currency-input', { template: '\ <span>\ $\ <input\ ref="input"\ v-bind:value="value"\ v-on:input="updateValue($event.target.value)"\ >\ </span>\ ', props: ['value'], methods: { // 不是直接更新值,而是使用此方法来对输入值进行格式化和位数限制 updateValue: function (value) { var formattedValue = value // 删除两侧的空格符 .trim() // 保留 2 小数位 .slice( 0, value.indexOf('.') === -1 ? value.length : value.indexOf('.') + 3 ) // 如果值不统一,手动覆盖以保持一致 if (formattedValue !== value) { this.$refs.input.value = formattedValue } // 通过 input 事件发出数值 this.$emit('input', Number(formattedValue)) } } })
官网例子中有这个例子
不是很明白这个if里面的事情,因为我理解后面$emit更新后,input的value会跟着变,是不是多此一举了?
// 如果值不统一,手动覆盖以保持一致 if (formattedValue !== value) { this.$refs.input.value = formattedValue } // 通过 input 事件发出数值 this.$emit('input', Number(formattedValue))
并没有多次一举啊。 将if那段代码注释掉,往input中输入内容是没有限制的,并不是只到了小数点后两位就停止了。同时input标签的value值也不全等于formattedValue,而是等于输入框中输入的值。这点我也好奇为啥会这样...
Vue.js 中使用内置的
v-model
指令通过绑定值和捕获input
事件来模拟双向绑定。在官方文档中也只是对
input
输入框做了自定义的组件,并没有radio
和checkbox
的举例。关于
v-model
表单的处理在官方文档已经说的很细了,这里再深入一番。
input 输入框
input输入框上的
v-model
只是一个简化的指令,它的双向绑定原理很简单,如下:在
input
或者textarea
标签上使用v-model="msg"
相当于radio 单选按钮
正常用法:
相当于
checkbox 多选按钮
checkbox
略微复杂,因为涉及到了只有一个还是多个多选框的情况。如果只有一个
checkbox
v-model
会把它视为一个Boolean
类型的值并且忽略value
, 比如:等价于
如果获取的值不希望是
true
或false
还可以加上true-value
和false-value
属性相当于
上面的例子只是存在一个多选框的情况,如果多个
checkbox
共用同一个model
,那这些checkbox
将会把所有选中的值组成一个数组放进去。同时true-value
和false-value
属性将不会再有效。正常写法:
相当于
这里得逻辑就相对于复杂了,
checkVal
用来判断是否被选中update
方法用来更新整个被选中值的数组。v-model
在自定义组件中的使用自定义组件中也可以使用
v-model
和这种用法是一样的:
在 2.2.0+ 的版本中可以使用
model
属性在自定义组件中来实现属性和事件的自定义:v-model
将会查询所有的属性来替代value
属性,并使用prop
中来替代input
事件的监听。因此上面的那个
custom-component
组件被改写为自定义
radio
按钮中使用v-model
用
label
标签来做模拟一个简单的实现:这里只是做模拟所以
props
中只写了这里能用到的属性自定义
checkbox
按钮中使用v-model
因为要支持单个
true false
类型的checkbox
(同时支持true-value
false-value
)和多个checkbox
,将所有选中的值存入数组中。因此这里的代码就稍微复杂了一些。其实只要把上面
checkbox
v-model
代码的实现再增加些判断逻辑就能实现:上面自定义的组件代码也不是很复杂,只是为了通过代码解释下
v-model
在内部是如何工作的,所以功能肯定不完整。最后
vue.js 官方以提供了很多优秀的第三方组件库,自定义组件的实现原理其实也大同小异。