vue实现下拉二级联动_vue 实现二级联动

因项目需要，最近用vue写了个二级联动，刚开始用vue不熟悉，收集了两种方法，这也是我借鉴别人的文章和思路才写出来的，其实没什么区别，可以参考下：

第一种：

这是第一种方法的html部分代码：

这是第一种方法的js部分代码：

new Vue({

el: '#test',

data: {

selected: '计信院',

YX: [{

text: '计信院',

ZY: [{

text: '软件工程'

}, {

text: '计算机科学与技术'

}, {

text: "信息安全"

}, ]

}, {

text: '商学院',

ZY: [{

text: '旅游管理'

}, {

text: '工商管理'

}, {

text: "行政管理"

}, ]

computed: {

selection: {

get: function() {

var that = this;

return this.YX.filter(function(item) {

return item.text == that.selected;

})[0].ZY;

}

});

以上是一种方法，总体来说还不错，而且默认有第一项，无需在写默认项。

下面是另一种方法，这个方法和上面不同的是没有默认项，但是比上面哪种方法更好理解，这个方法怎么加默认项，现在还没搞明白，后续会继续更新：

这是第二种方法的html部分代码：

这是第二种方法的js部分代码：

var vm = new Vue({

el:'#test',

data:{

YX:[

{

text:'计信院',

ZY:[

{text:'软件工程'},

{text:'计算机科学与技术'},

{text:"信息安全"},

]

{

text:'商学院',

ZY:[

{text:'旅游管理'},

{text:'工商管理'},

{text:"行政管理"},

]

computed:{

selection: function() {

for (var i = 0; i < this.YX.length; i++) {

if (this.YX[i].text === this.A) {

return this.YX[i].ZY;

}

});

总体来说，两种方法都可以，都值得借鉴一下

vue实现下拉二级联动_vue 实现二级联动相关推荐

利用ajax实现二级联动下拉框6,Ajax实现二级联动菜单
本文实例为大家分享了Ajax二级联动菜单的具体代码,供大家参考,具体内容如下 index.jsp 二级菜单联动演示 var req; window.οnlοad=function() {//页面加载时 ...
Vue封装下拉框组件时，为document绑定原生事件addEventlistener(click“)，切换页面之后事件还未被摧毁...
1 <script> 2 export default { 3 props: ["lists"], 4 data() { 5 return { 6 isactive: ...
vue动态生成下拉框_解决vue动态下拉菜单有数据未反应的问题
问题出现在当时后台数据会返回到data中但是没有出现下拉菜单,查询资料发现 Vue的this理解有误 jsp 下拉菜单 {{item.plantModelName}} JS new Vue({ el ...
vue省市区下拉框实现
vue省市区下拉框实现 1.效果如图选中省之后,再选择对应的市,再选择对应的区数据源js文件: 码云:https://gitee.com/wyjpositive/mybatis-plus-dem ...
FineReport 报表数据根据下拉框的值进行数据联动
FineReport 报表数据根据下拉框的值进行数据联动,不用点击查询按钮 1.新建数据库查询,获得数据. SELECT * FROM [销量] where 地区 ='${area}' 2.把需要展示 ...
vue项目下拉框内容过长做一个滚动条的效果
vue项目下拉框内容过长做一个滚动条的效果如下图: 关键代码如下:
Select下拉框实现中国省市区三级联动
JS Select下拉框实现中国省市区三级联动联动效果以内蒙古自治区为例 distpicker.js资源获取 https://pan.baidu.com/s/1S17KyRmPfz6WYaYUV1 ...
vue实现下拉二级联动_Vue实现三级联动/多级联动/城市选择
我网上搜了一圈,发现没什么具体教程,所以我出一个详细点的教程吧重点是要找到思路,其实不难的.估计也是因为不难所以网上才没具体教程的吧效果图.png 准备一串Json的数据 json数据就是对象格式 ...
vue实现下拉二级联动_select下拉菜单实现二级联动效果
需求:建立年级.班级两个数据表,获取年级表信息,根据年级,获取相应的班级效果图: 不完美的地方就是在不选择年级的时候,是不能选择任何班级的. 代码部分首先是建立两个表的实体需要注意的就是写注解了 ...
vue+element下拉框实现二级联动
参考文章:https://blog.csdn.net/qq_42341025/article/details/86601093 <el-form-item label-width="8 ...

vue实现下拉二级联动_vue 实现二级联动

vue实现下拉二级联动_vue 实现二级联动相关推荐

最新文章

热门文章