为什么会有bug？Uncaught TypeError: dataOptions.call is not a function

最新推荐文章于 2024-08-01 17:00:15 发布

原创最新推荐文章于 2024-08-01 17:00:15 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

vue 同时被 2 个专栏收录

722 篇文章

订阅专栏

JavaScript

628 篇文章

订阅专栏

本文介绍了如何使用Vue.js创建一个带有动态绑定选项的下拉框，展示了v-model指令的应用以及选择事件的处理。通过实例代码演示了如何获取选中项的值和索引。


<!DOCTYPE html>
<html>
<div id="app">    
	<select v-model="selectItem" @change="selectFn($event)">       
		 <!--选择项的value值默认选择项文本 可动态绑定选择项的value值 更改v-model指令绑定数据-->        
		<option v-for="item in items" :value="item.id">{{item.name}}</option>    
	</select>   
	 <div>{{selectItem}}</div>    
	<!--选择项的value值-->
</div>
	
	<script src="https://unpkg.com/vue@next"></script>
	<script>    
	const app = Vue.createApp({   
		   data: {        
			    selectItem: '分类1',     
			       items: [             
				       {id:11, name: '分类1'},         
				       {id:22, name: '分类2'},        
				       {id:33, name: '分类3'}        
			             ]       
		 },       
			 methods: {       
				     selectFn(e) {          
					      console.log(e)       
					      console.log(e.target.selectedIndex) // 选择项的index索引              
                          console.log(e.target.value) // 选择项的value           
 }   
     }   
 });

app.mount('#app')
</script>
</html>