Vue.js中如何简便显示下拉选中项的值（已用v-model）

你完全没必要给每个选项单独绑定v-model，把v-model绑定在<select>标签上就足够了——Vue会自动把选中项的value值同步到你绑定的selected变量里。

你当前代码里的问题是页面上写的{{value}}是无效的，应该改成{{selected}}，因为你在data里定义的绑定变量是selected。

修正后的完整代码如下：

JavaScript 代码 #

new Vue({
  el: "#app",
  data: {
    selected: '',
  },
  // 如果toggle方法没用到可以直接删掉
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <!-- 这里把{{value}}改成{{selected}} -->
  {{selected}}
  <select v-model="selected" class="hide">
    <option value=''></option>
    <option value='Act'>test1</option>
    <option value='Advertising'>My AD</option>
  </select>
</div>

如果你的下拉选项很多或者需要动态生成，推荐用数组配合v-for渲染选项，这样不用手动写每个<option>，维护起来更方便：

优化后的动态选项写法 #

JavaScript 代码

new Vue({
  el: "#app",
  data: {
    selected: '',
    // 把选项定义成数组
    options: [
      { text: '', value: '' },
      { text: 'test1', value: 'Act' },
      { text: 'My AD', value: 'Advertising' }
    ]
  }
})

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{selected}}
  <select v-model="selected" class="hide">
    <!-- 用v-for循环渲染所有选项 -->
    <option v-for="option in options" :value="option.value">{{ option.text }}</option>
  </select>
</div>

内容的提问来源于stack exchange，提问作者Vzupo