<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<ul>
<li v-for="item in list" >
{{item.name}}
<select @change="changea($event)">
<option value="" disabled selected>必选</option>
<option v-for="item in item.list2" >{{item.name}}</option>
</select>
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
message: 'Runoob!',
list:[
{
name:'第一个select',
code:12,
list2:[
{name:'飞飞飞23',code:11},
{name:'闭包22',code:22},
]
},
{
name:'第二个select',
code:23,
list2:[
{name:'哈哈哈',code:33},
{name:'快快快',code:44},
]
},
{
name:'第三个select',
code:34,
list2:[
{name:'等等',code:55},
{name:'各个',code:66},
]
},
]
}
},
methods:{
changea(e){
console.log(e.target.value)
},
}
})
</script>
</body>
</html>
