Vue.js自定义事件的表单输入组件方法
发布时间：2020-12-17 02:31:32 所属栏目：百科 来源：网络整理
导读：Vue.js使用自定义事件的表单输入组件 自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。要牢记： 这不过是以下示例的语法糖： 所以在组件中使用时，它相当于下面的简写： 所以要让组件的 v-model 生效，它应该 (从 2.2.0 起是
Vue.js使用自定义事件的表单输入组件自定义事件可以用来创建自定义的表单输入组件，使用 v-model 来进行数据双向绑定。要牢记： 这不过是以下示例的语法糖：所以在组件中使用时，它相当于下面的简写：所以要让组件的 v-model 生效，它应该 (从 2.2.0 起是可配置的)： 接受一个 value prop 在有新的值时触发 input 事件并将新值作为参数 我们来看一个非常简单的货币输入的自定义控件：--在父组件中引用子组件模板时用绑定v-model数据：
$
',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))
}
}
})
自定义组件的v-model2.2.0 新增 默认情况下，一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突： 上述代码等价于： 注意你仍然需要显式声明 checked 这个 prop。 以上这篇Vue.js自定义事件的表单输入组件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |