这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要介绍了使用 vue.js 实现 checkbox 的全选和多个的删除功能, 需要的朋友可以参考下
template 代码:
- <template>
- <div class="hello">
- <ul>
- <li v-for="(item, index) in proData">
- <label for="">
- <input type="checkbox" :value="index" v-model="selectArr">
- </label>
- {{item.name}}
- </li>
- :
- </ul>
- <button type="" @click="del">
- 删除
- </button>
- {{selectArr}}
- <label>
- <input type="checkbox" class="checkbox" @click="selectAll" />
- 全选
- </label>
- </div>
- </template>
script 部分:
- <script>
- var proData = [{
- "name": "j1ax"
- },
- {
- "name": "j2ax"
- },
- {
- "name": "j3ax"
- },
- {
- "name": "j4ax"
- }] export
- default {
- name:
- 'hello',
- data() {
- return {
- proData: proData,
- selectArr: []
- }
- },
- created() {
- this.$http.get('/api/home').then(function(response) {
- response = response.body;
- this.proData = response.data;
- })
- },
- methods: {
- del() {
- let arr = [];
- var len = this.proData.length;
- for (var i = 0; i < len; i++) {
- if (this.selectArr.indexOf(i) >= 0) {
- console.log(this.selectArr.indexOf(i))
- } else {
- arr.push(proData[i])
- }
- }
- this.proData = arr;
- this.selectArr = []
- },
- selectAll(event) {
- var _this = this;
- console.log(event.currentTarget) if (!event.currentTarget.checked) {
- this.selectArr = [];
- } else { //实现全选
- _this.selectArr = [];
- _this.proData.forEach(function(item, i) {
- _this.selectArr.push(i);
- });
- }
- }
- }
- }
- </script>
以上所述是小编给大家介绍的使用 vue.js 实现 checkbox 的全选和多个的删除功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0501/327532.html