點開Vue官網，看了看Vue的介紹，感覺這框架不錯！
其實，自己就是小白，對於這個框架可以說只聞其聲不見其形，更別說熟悉或者掌握了。
朋友說面試的時候讓他寫一個二級聯動，我想到Vue的雙向數據綁定，於是，就有了以下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>城市二級聯動</title>
</head>
<body>
<select @change="selectVal" id="province">
<option> 請選擇省份</option>
<option v-for="key in todos" v-model="key"> {{ key }}</option>
</select>
<select id="selected" v-html="opt">
<option> 請選擇城市</option>
</select>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script><script>
var pcdata = {
"北京":["朝陽","大興","昌平"],
"山西":["太原","朔州","大同","運城"],
"河北":["石家莊","定州","雄安","高碑店"]
}
var app = new Vue({
el: '#province',
data:{
todos:["北京","山西","河北"]
},
methods:{
selectVal: function(ele) {
new Vue({
el:"#selected",
data:function(){
var opt = '<select id="selected" v-html="opt"><option> 請選擇城市</option>';
var cities=pcdata[ele.target.value];
if(cities!=undefined){
for(var i = 0;i<cities.length;i++){
opt+='<option>'+cities[i]+'</option>'
}
}
return {
opt:opt,
}
}
})
document.getElementById("selected").setAttribute("v-html","opt");
}
}
})
</script></html>
其中，好多細節值得注意，有興趣的可以看一下！
想看效果的直接複製到HTML裏就可以了！