vue做單選只能選一個

<template><div class="list"><!-- 多行多列單選 --><span>只能選一個</span><div class="list-group" v-for="(item,index) in items"><div class="left"><p>{{item.sex}}</p></div><div class="right" ><div class="right-box" v-for="list in item.introduce" @click="check(item,list,index)"><i class="iconfont" :class="checked == list.id?'icon-yuanyixuan':'icon-yuanweixuan'"></i><p >{{list.name}}</p></div></div></div></div> </template> <script> export default{name: 'list',data() {return {checked: '',items: [{sex: '男愛豆',introduce: [{name: '易烊千璽',id: 1},{name: '張一山',id: 2},{name: '朱亞文',id: 3}]},{sex: '女愛豆',introduce: [{name: '迪麗熱巴',id: 4},{name: '楊紫',id: 5},{name: '鄭爽',id: 6}]}]}},methods: {check(item,list,index) {this.checked = list.id;}} }</script> <style lang="less"> .list {span {display: inline-block;width: 400px;text-align: center;margin-bottom: 10px;}.list-group {width: 400px;height: 50px;.left {float: left;width: 100px;}.right {float: right;width: 300px;.right-box {display: inline-block;width: 100px;p {display: inline-block;}.icon-yuanyixuan {color: red;}}}} } </style>

每行可以選一個

<div class="list"><!-- 多行多列單選 --><span>每行可以選一個</span><div class="list-group" v-for="(item,index) in items"><div class="left"><p>{{item.sex}}</p></div><div class="right" ><div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)"><i class="iconfont" :class="item.isChecked == index ?'icon-yuanyixuan':'icon-yuanweixuan'"></i><p >{{list.name}}</p></div></div></div> </div>

js

export default{name: 'list',data() {return {checked: '',items: [{sex: '男愛豆',isChecked: 0,introduce: [{name: '易烊千璽',},{name: '張一山',},{name: '朱亞文',}]},{sex: '女愛豆',isChecked: 1,introduce: [{name: '迪麗熱巴',},{name: '楊紫',},{name: '鄭爽',}]}]}},methods: {check(item,list,index) {item.isChecked = index;}} }

vue多選

<div class="list"><span>終于可以多選了</span><div class="list-group" v-for="(item,index) in items"><div class="left"><p>{{item.sex}}</p></div><div class="right" ><div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)"><i class="iconfont" :class="item.isChecked.indexOf(index) != -1 ?'icon-yuanyixuan':'icon-yuanweixuan'"></i><p >{{list.name}}</p></div></div></div></div>

js

export default{name: 'list',data() {return {checked: '',items: [{sex: '男愛豆',isChecked: [0],introduce: [{name: '易烊千璽'},{name: '張一山'},{name: '朱亞文'}]},{sex: '女愛豆',isChecked: [0],introduce: [{name: '迪麗熱巴'},{name: '楊紫'},{name: '鄭爽'}]}]}},methods: {check(item,list,index) {var tmpIndex = item.isChecked.indexOf(index);// -1就是選中狀態if(tmpIndex != -1){item.isChecked.splice(tmpIndex,1);}else {item.isChecked.push(index);}}} }

vue多選框，實現添加和刪除功能

<div class="list"><span>可添加刪除</span><div class="list-group" v-for="(item,index) in items"><div class="left"><p>{{item.sex}}</p></div><div class="right" ><div class="right-box" v-for="(list,index) in item.introduce" @click="check(item,list,index)"><i class="iconfont" :class="choose.indexOf(list.name) != -1 ?'icon-yuanyixuan':'icon-yuanweixuan'"></i><p >{{list.name}}</p></div></div></div><div class="list-group"><div class="left"><p>你的選擇是</p></div><div class="right">({{choose.join(',')}})</div></div></div>

js

export default{name: 'list',data() {return {items: [{sex: '男愛豆',introduce: [{name: '易烊千璽'},{name: '張一山'},{name: '朱亞文'}]},{sex: '女愛豆',introduce: [{name: '迪麗熱巴'},{name: '楊紫'},{name: '鄭爽'}]}],choose: []}},methods: {check(item,list,index) {var tmpIndex = this.choose.indexOf(list.name);// -1就是選中狀態if(tmpIndex != -1){this.choose.splice(tmpIndex,1)}else {this.choose.push(list.name);}}} }

轉載于:https://www.cnblogs.com/DCL1314/p/10109923.html

總結

以上是生活随笔為你收集整理的vue单选，多选，多选的内容显示在页面可删除的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。