查看“Vue从入门到实战:实例 combobox”的源代码
←
Vue从入门到实战:实例 combobox
跳转至:
导航
,
搜索
因为以下原因,您没有权限编辑本页:
您所请求的操作仅限于该用户组的用户使用:
用户
您可以查看与复制此页面的源代码。
我们利用Vue.js提供的组件功能,自己来实现一个组合框。 ==功能== 从下拉框中选择一项,文本输入框中会显示所选的内容。也可以直接在文本框中输入内容 ==要点== *通过prop 向自定义组件传值 *通过v-model="selectedVal" 实现了自定义组件的双向绑定。 *在没有应用model选项的情况下,v-model的传值给了自定义组件的value属性。 *利用v-on="inputListeners"将所有的事件监听器指向这个组件的某个特定的子元素 ==源码== <nowiki> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>组合框</title> <script src="vue.js"></script> </head> <body> <div id="app"> <combobox label="请选择了解信息的渠道" :list="['报纸', '网络', '朋友介绍']" v-model="selectedVal"> </combobox> <span>选中的值是:{{selectedVal}}</span> </div> <script> Vue.component('combobox', { inheritAttrs: false, props: ['label', 'value', 'list'], computed: { inputListeners: function () { var vm = this return Object.assign({}, this.$listeners, { input: function (event) { vm.$emit('input', event.target.value) } } ) } }, template: ` <div> <label style="float: left;"> {{ label }} </label> <table> <tr> <td> <input :value="value" v-on="inputListeners"> </td> </tr> <tr> <td> <select :value="value" v-on="inputListeners"> <option disabled value="">请选择</option> <option v-for="item in list" :value="item"> {{item}} </option> </select> </td> </tr> </table> </div> ` }) new Vue({ el: '#app', data: { selectedVal: '' } }) </script> </body> </html> </nowiki>
返回至
Vue从入门到实战:实例 combobox
。
导航菜单
个人工具
登录
命名空间
页面
讨论
变种
视图
阅读
查看源代码
查看历史
更多
搜索
导航
首页
最近更改
随机页面
帮助
工具
链入页面
相关更改
特殊页面
页面信息