4. v-model结合select使用

最新推荐文章于 2023-07-04 15:14:54 发布

白怀宇

最新推荐文章于 2023-07-04 15:14:54 发布

阅读量521

点赞数 1

分类专栏： Vue2 学习笔记

本文链接：https://blog.csdn.net/b342216980/article/details/106718428

版权

Vue2 学习笔记专栏收录该内容

45 篇文章 0 订阅

订阅专栏

v-model结合select使用

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>v-model结合select使用</title>
</head>
<body>

<div id="app">
	<h2>单选</h2>
	<select v-model="fruit">
		<option value="香蕉">香蕉</option>
		<option value="苹果">苹果</option>
		<option value="橙子">橙子</option>
		<option value="榴莲">榴莲</option>
	</select>
	<h3>{{ fruit }}</h3>

	<h2>多选</h2>
	<select v-model="fruits" multiple>
		<option value="香蕉">香蕉</option>
		<option value="苹果">苹果</option>
		<option value="橙子">橙子</option>
		<option value="榴莲">榴莲</option>
	</select>
	<h3>{{ fruits }}</h3>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	app = new Vue({
		data:{
			fruit: '苹果',
			fruits: []
		},
	}).$mount('#app')
</script>

</body>
</html>

白怀宇

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4. v-model结合select使用

v-model结合select使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model结合select使用</title></head><body><div id="app"> <h2>单选</h2> <select v-model="fruit"&gt
复制链接

扫一扫