“Vue从入门到实战：实例 combobox”的版本间的差异
来自CloudWiki
（创建页面，内容为“我们利用Vue.js提供的组件功能，自己来实现一个组合框。”） |
|||
| 第1行： | 第1行： | ||
我们利用Vue.js提供的组件功能，自己来实现一个组合框。 | 我们利用Vue.js提供的组件功能，自己来实现一个组合框。 | ||
| + | |||
| + | 从下拉框中选择一项，文本输入框中会显示所选的内容。也可以直接在文本框中输入内容 | ||
| + | |||
| + | <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> | ||
2021年2月11日 (四) 08:01的版本
我们利用Vue.js提供的组件功能，自己来实现一个组合框。
从下拉框中选择一项，文本输入框中会显示所选的内容。也可以直接在文本框中输入内容
<!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>
