vue 获取select的选中对象值

vue 官网：https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86思路：通过下标值来获取，指向的对象的值代码：<!DOCTYPE html><html><head><title>获取数据</title><meta charset="utf-8"&gt

Alice9969

7017人浏览 · 2020-07-17 22:51:39

Alice9969 · 2020-07-17 22:51:39 发布

vue 官网：https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86

思路：通过下标值来获取对象的值

代码：

<!DOCTYPE html>
<html>
<head>
   <title>获取数据</title>
   <meta charset="utf-8">
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
   <div id='app'>
       <h2>
           请选择你喜欢水果ID
       </h2>
       <select v-model="seleced">
           <option v-for="(item, key) in optionArr" :value="key">
               {{ item.label }}
           </option>
       </select>
       <h3>
           
           {{ optionArr[seleced]['id'] }}
       </h3>
   </div>
</body>
<script type="text/javascript">
   var app = new Vue({
       el: '#app',
       data() {
           return {
               optionArr: [
                   {label: "苹果", id: 2, en: "appe", price: "10块"},
                   {label: "雪梨", id: 22, en: "pear", price: "2块"},
                   {label: "西瓜", id: 222, en: "watermelon", price: "5块"},
                   {label: "葡萄", id: 2222, en: "grape", price: "8块"},
                   {label: "樱桃", id: 'yingTao', en: "Cherry", price: "6块"},
               ],
               seleced: 3 // 选中的数组下标，用于指向数组中，选中的对象位置
           }
       },
       watch: {
           seleced(newVal, oldVal) {
               console.log('你选中的对象数据为：')
               console.log( this.optionArr[newVal] )
           }
       }
   });
</script>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^