Vue学习--combobox小案例

最新推荐文章于 2023-06-12 11:44:05 发布

献_

最新推荐文章于 2023-06-12 11:44:05 发布

阅读量1.1k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45726044/article/details/114672729

版权

组合框

它是由一个文本框和下拉列表框组成的
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组合框</title>
</head>
<body>
<div id="app">
  <combobox
          label="请选择了解信息的渠道"
          :list="['数据结构', '计算机网络', 'windows程序设计','操作系统']"
          v-model="selectedVal">
  </combobox>
  <span>选中的值是：{{selectedVal}}</span>
</div>
<script src="../vue.js"></script>
<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>

运行结果

献_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习--combobox小案例

组合框它是由一个文本框和下拉列表框组成的代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组合框</title></head><body><div id="app"> <combobox label="请选择了解信息的渠道" :li
复制链接

扫一扫