Vue是一款輕量級的JavaScript框架,ajax也是Vue經常使用的技術。本文將介紹如何用Vue實現多選功能。
首先,在HTML中定義一個列表,用于顯示多選控件:
<div id="app"> <ul> <li v-for="opt in options"> <label> <input type="checkbox" v-model="userOpts" value="{{opt.id}}"> {{opt.text}} </label> </li> </ul> </div>
然后,在Vue實例中定義數據和方法:
<script> new Vue({ el: '#app', data: { options: [ { id: 1, text: '選項1' }, { id: 2, text: '選項2' }, { id: 3, text: '選項3' }, { id: 4, text: '選項4' } ], userOpts: [] }, methods: { submit: function () { var self = this; var data = { userOpts: self.userOpts }; $.ajax({ url: '/your/api/url', type: 'POST', data: data, success: function (res) { // 請求成功后的操作 }, error: function (err) { // 請求失敗后的操作 } }); } } }); </script>
其中,options
為選項列表,userOpts
為用戶勾選的選項,submit
方法發送Ajax請求,并將用戶選擇的選項提交給API。
最后,在提交按鈕處調用submit
方法:
<button @click="submit">提交</button>
這樣,就實現了一個基本的Vue ajax多選控件。
上一篇vue http 全局
下一篇mysql去重分組