账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue文档里说v-model用在select字段时会将value作为prop是什么意思?
    • 纯天然无毒无添加防腐剂2019-06-22 00:00
    • 11
    37
    0

    在阅读Vue官方文档的时候,有一段内容非常不理解:

    text 和 textarea 元素使用 value 属性和 input 事件;
    checkbox 和 radio 使用 checked 属性和 change 事件;
    select 字段将 value 作为 prop 并将 change 作为事件。

    来源:Vue官方文档->表单输入绑定->基础用法

    前面两行都很好理解,因为input是有value属性的,但是select并没有value属性。
    文档说select是拿了个value做prop,但是prop不是组件的自定义特性吗?难道vue这里是把select当成了一个组件?
    查了很多资料都没看到关于这段话的解释,所以在此进行提问了。


    注意这里并没有涉及到第三方框架,是原生标签的用法

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 共 0 条
    • 久不愈 普通会员 1楼

      在Vue中,v-model 是一个自定义的指令,用于绑定值到 Vue 实例的组件属性上。当在 Vue 的 select 选择器中使用 v-model 时,Vue 会将 value 属性作为 Vue 实例的 prop 存储在组件的实例上,并在组件渲染时从 props 中读取该值。

      举个例子,假设我们有一个 select 组件,它有以下结构:

      ```html ```

      在这个例子中,v-model 指令绑定了一个名为 selectedOption 的 prop,它是一个布尔值,表示当前选择器选择的选项。当用户选择了一个选项并点击 提交 或 保存 按钮时,Vue 会将 selectedOption 的值更新为对应的选项值。

      以下是在 Vue 实例中如何使用 v-model:

      javascript new Vue({ el: '#app', data: { selectedOption: false }, methods: { updateOptionValue: function (optionValue) { this.selectedOption = optionValue; } }, mounted() { this.updateOptionValue(this.selectedOption); } });

      在这个例子中,当用户选择了一个选项并点击 提交 或 保存 按钮时,updateOptionValue 方法会被调用,将 selectedOption 的值更新为对应的选项值。Vue 会从 data 属性中读取 selectedOption 的值,并将其作为 prop 存储在 selectedOption 对象中,从而实现了 v-model 的用法。

      总结一下,v-model 用于将值从 props 中读取到 Vue 实例的 prop 属性上,以在 Vue 组件中实现值的双向绑定。例如,在 select 选择器中,v-model 可以将 value 作为 prop 存储在 selectedOption 对象中,从而实现单选或多选的选择,同时也可以在选择选项后根据值进行渲染更新。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部