网站开发用什么技术,花瓣网 素材 图库,简单大气的建筑公司名字,没有公网ip建设网站v-model原理 v-model原理表单类组件封装v-model简化代码 v-model原理
1.原理#xff1a;
v-model本质上是一个语法糖。例如应用在输入框上#xff0c;就是value属性 和 input 事件的合写
templatediv idapp input v-modelmsg… v-model原理 v-model原理表单类组件封装v-model简化代码 v-model原理
1.原理
v-model本质上是一个语法糖。例如应用在输入框上就是value属性 和 input 事件的合写
templatediv idapp input v-modelmsg typetextinput :valuemsg inputmsg $event.target.value typetext/div
/template
2.作用
提供数据的双向绑定
数据变视图跟着变 :value视图变数据跟着变 input
3.注意
$event 用于在模板中获取事件的形参
4.代码示例
templatediv classappinput typetext /br / input typetext //div
/templatescript
export default {data() {return {msg1: ,msg2: ,}},
}
/script
style
/style5.v-model使用在其他表单元素上的原理
不同的表单元素 v-model在底层的处理机制是不一样的。比如给checkbox使用v-model
底层处理的是 checked 属性和 change 事件。
不过咱们只需要掌握应用在文本框上的原理即可
表单类组件封装
1.需求目标
实现子组件和父组件数据的双向绑定 实现App.vue中的selectId和子组件选中的数据进行双向绑定
2.代码演示
App.vue
templatediv classappBaseSelect/BaseSelect/div
/templatescript
import BaseSelect from ./components/BaseSelect.vue
export default {data() {return {selectId: 102,}},components: {BaseSelect,},
}
/scriptstyle
/styleBaseSelect.vue
templatedivselectoption value101北京/optionoption value102上海/optionoption value103武汉/optionoption value104广州/optionoption value105深圳/option/select/div
/templatescript
export default {
}
/scriptstyle
/stylev-model简化代码
1.目标
父组件通过v-model 简化代码实现子组件和父组件数据 双向绑定
2.如何简化
v-model其实就是 :value和input事件的简写
子组件props通过value接收数据事件触发 input父组件v-model直接绑定数据
3.代码示例
子组件
select :valuevalue changehandleChange.../select
props: {value: String
},
methods: {handleChange (e) {this.$emit(input, e.target.value)}
}父组件
BaseSelect v-modelselectId/BaseSelect
