在Vue中獲取多選選項的值需要使用v-model和數組。
首先在HTML中將多選框綁定到一個數組上:
<div id="app"> <label> <input type="checkbox" v-model="selected" value="A">A </label> <label> <input type="checkbox" v-model="selected" value="B">B </label> <label> <input type="checkbox" v-model="selected" value="C">C </label> </div> <script> var app = new Vue({ el: "#app", data: { selected: [] } }); </script>
在上面的代碼中,我們使用了v-model將多選框的值綁定到selected數組中。這樣,當我們選中一個多選框時,selected數組會新增一個相應的值。
如果要獲取選中的值,我們可以使用selected數組的join方法來將多選框的值轉化為一個字符串:
<button @click="showValues">獲取選中的值</button> <script> var app = new Vue({ el: "#app", data: { selected: [] }, methods: { showValues: function() { alert(this.selected.join(", ")); } } }); </script>
在上面的代碼中,我們使用了一個showValues方法來通過彈窗展示選中的值。
綜上所述,Vue中獲取多選選項的值只需要使用v-model和數組即可。
下一篇vue獲取多層