<!DOCTYPE html>
<html>
<div id="app">
<my-input
label="请选择了解信息的渠道"
:list="['报纸', '网络', '朋友介绍']"
v-model="selectedVal">
</my-input>
<span>选中的值是： {{ selectedVal }}</span>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
selectedVal: ''
}
}
});
app.component('MyInput', {
props: ['label', 'list', 'modelValue'],
template:
`
<div>
<label style = "float: left;">
{{ label }}
</label>
<table>
<tr>
<td>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)">
</td>
</tr>
<tr>
<td>
<select
:value="modelValue"
@change="$emit('update:modelValue', $event.target.value)">
<option disabled value="">请选择</option>
<option v-for="item in list" :value="item">{{ item }}</option>
</select>
</td>
</tr>
</table>
</div>
`
});
app.mount('#app');
</script>
</html>
1587
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
