js实现简单的二级联动（使用Vue实现）
点开Vue官网，看了看Vue的介绍，感觉这框架不错！其实，自己就是小白，对于这个框架可以说只闻其声不见其形，更别说熟悉或者掌握了。朋友说面试的时候让他写一个二级联动，我想到Vue的双向数据绑定，于是，就有了以下代码：<!DOCTYPE html><html><head> <meta charse
·
点开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里就可以了！
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)