【面试题】vue实现二级联动（好像也不算二级联动）

需求就是上面的的了。
以下是我的实现：
代码实现
反思：

1. 题没看清，数量那个地儿应该是输入框，我给弄成了下拉框
2. 不熟练，一直得百度，一直得改bug，也才到这样一个效果

贴个代码记录一下：

<!-- 第一个下拉框 -->
<select name="radioOrCheckbox" id="radioOrCheckbox" v-model="value1" @change="change1">
      <option value="0">请选择</option>
      <option value="1">单选</option>
      <option value="2">多选</option>
    </select>
    <!-- 第二个下拉框 -->
    <select name="num1" id="num1" v-show="show" v-model="value2" @change="change2">
      <option value="0">请选择</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <!-- ---题---- -->
    <div v-show="show2" v-for="(item, index) in currentList" :key="index">
      <input :name="item.name" :type="item.type" v-model="item.choose" value="item.value" id="item.id">
      <label for="item.value">{{item.value}}</label>
    </div>

data () {
    return {
      value1: 0, // 第一个下拉框的值
      value2: 0, // 第二个下拉框的值
      show: false, // 第二个下拉框显示隐藏
      show2: false, // 题显示隐藏
      currentList: [], // 要遍历的题
      // 单选选项。我这里是写死的，这个数据应该是从后端获取更好
      listRadio: [
        {
          type: 'radio',
          name: 'radio',
          choose: '',
          value: '单选1',
          id: 1
        },
        {
          type: 'radio',
          name: 'radio',
          choose: '',
          value: '单选2',
          id: 2
        },
        {
          type: 'radio',
          name: 'radio',
          choose: '',
          value: '单选3',
          id: 3
        }
      ],
      // 多选选项。我这里是写死的，这个数据应该是从后端获取更好
      listChecbox: [
        {
          type: 'checkbox',
          name: '',
          choose: false,
          value: '多选1',
          id: 1
        },
        {
          type: 'checkbox',
          name: '',
          choose: false,
          value: '多选2',
          id: 2
        },
        {
          type: 'checkbox',
          name: '',
          choose: false,
          value: '多选3',
          id: 3
        }
      ],
   }
}

	// 单选还是多选
    change1 (e) {
      if (e.target.value === '1') {
        // 单选
        this.show2 = false // 题隐藏
        this.show = true // 数量选择下拉框显示
        this.value2 = 0 // 改为请选择
        this.change1() // 根据数量显示题
      } else if (e.target.value === '2') {
        // 多选
        this.show2 = false // 题隐藏
        this.show = true // 数量选择下拉框显示
        this.value2 = 0 // 改为请选择
        this.change1() // 根据数量显示题
      } else if (e.target.value === '0') {
        // 请选择
        this.show = false // 数量选择下拉框隐藏
        this.show2 = false // 题隐藏
      }
    },
    // 选几道题
    change2 (e) {
      if (e.target.value === '0') {
        // 请选择
        this.show2 = false
      } else {
        // 选择好数量
        var numshow = e.target.value
        if (this.value1 === '1') {
          // 单选情况下
          this.currentList = this.listRadio.slice(0, numshow)
        } else if (this.value1 === '2') {
          // 多选情况下
          this.currentList = this.listChecbox.slice(0, numshow)
        }
        this.show2 = true
      }
    },

注释写这么详细，一定是新人吧，哈哈哈哈哈！

来源：CSDN

作者：Veranew

链接：https://blog.csdn.net/Veranew/article/details/103686210