HTML原生标签使用VUE

单选

<div>
  <label>
    <input type="radio" v-model="selectType" :value="1" /> 考号
  </label>

  <label>
    <input type="radio" v-model="selectType" :value="2" /> 选择题
  </label>
</div>

下拉

<template>
  <div>
    <label for="options">选择一个选项:</label>
    <select id="options" v-model="selectedOption">
      <option disabled value="">请选择</option>
      <option v-for="option in options" :key="option.value" :value="option.value">
        {{ option.text }}
      </option>
    </select>
    <br>
    <p>你选择了: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '', // 默认选中值
      options: [
        { text: '选项1', value: 'option1' },
        { text: '选项2', value: 'option2' },
        { text: '选项3', value: 'option3' }
      ]
    };
  }
};
</script>

获取选中项的值和文本

<select @change="tixingChange($event, qes)">
    <option
      :value="item.qtypeid + '_' + item.ctype"
      v-for="(item, i2) in questypelist"
      :key="i2"
      >{{ item.qtypename }}
    </option>
</select>

对应的方法

tixingChange: function(event, ques) {
  let text = event.target.selectedOptions[0].text; // 选中文本
  let value = event.target.value; // 选中值
  console.info("选择了:" + text);
  console.info("选择了:" + value);
}

按钮

<button @click="recognitionClick()">识别</button>

Checkbox

<label><input type="checkbox" v-model="showCompany" />显示企业</label>

数据

data() {
    return {
      showCompany: true,
    };
}