本文展示了一个使用 Vue.js 实现的多选下拉框组件示例，该组件可以根据用户的选择动态显示已选择的工作地点。通过这个例子可以了解到如何在 Vue 中使用 v-model 和 v-for 指令来实现数据绑定。
<html>
<head>
<script src='js/vue.js'></script>
</head>
<body>
<div id="example">
<select v-model='workplaces' multiple>
<option v-for='city in cities' :value='city.value'>
{{ city.text }}
</option>
</select>
<p>workplace: {{ workplaces.join('|') }}</p>
</div>
</body>
<script type='text/javascript'>
new Vue({
el: '#example',
data: {
cities: [
{text: '西安', value: '西安'},
{text: '洛阳', value: '洛阳'},
{text: '南京', value: '南京'},
{text: '北京', value: '北京'}
],
workplaces: []
}
});
</script>
</html>
<head>
<script src='js/vue.js'></script>
</head>
<body>
<div id="example">
<select v-model='workplaces' multiple>
<option v-for='city in cities' :value='city.value'>
{{ city.text }}
</option>
</select>
<p>workplace: {{ workplaces.join('|') }}</p>
</div>
</body>
<script type='text/javascript'>
new Vue({
el: '#example',
data: {
cities: [
{text: '西安', value: '西安'},
{text: '洛阳', value: '洛阳'},
{text: '南京', value: '南京'},
{text: '北京', value: '北京'}
],
workplaces: []
}
});
</script>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
