HTML原生标签使用VUE

发表于 | 分类于
HTML原生标签使用VUE

单选

1
2
3
4
5
6
7
8
9
<div>
  <label>
    <input type="radio" v-model="selectType" :value="1" /> 考号
  </label>

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

下拉

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

获取选中项的值和文本

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

对应的方法

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

按钮

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