vue实现 单选按钮

vue实现 单选按钮

<template><div class="coupon"><!-- 导航栏 --><Navheader :title="title" /><div class="coupmain"></div><span v-for="(item,index) in momtlist[li].subjects" :key="index" :class="{select: item.selected}" @click="changeCss(item)">{{ item.name }}</span><p @click="motu">bfshjkf</p><p @click="motu1">uibjm</p></div>
</template>
<script>
import Vue from 'vue'
import Navheader from '../../components/Header'
export default {name:'coupon',data(){return{title:'',  // 导航栏li:0,momtlist:[{subjects: [{ name: '历史', selected: false },{ name: '地理', selected: false },{ name: '生物', selected: false },],   },{subjects: [{ name: '政治', selected: false },{ name: '技术', selected: false },{ name: '物理', selected: false },],   },{subjects: [{ name: '美术', selected: false },{ name: '体育', selected: false },{ name: '化学', selected: false }],}],}},methods:{// 返回上一步Goback(){this.$router.back()},motu(){this.li++;},motu1(){console.list);},changeCss(item) {if (!item.selected) {list[this.li].subjects.map(item=>{item.selected = false;})item.selected = true;} else if (item.selected) {item.selected = false}console.log(item)},},mounted(){this.title = this.$a.title; // 导航栏信息},components:{Navheader,}
}
</script>
<style lang="scss" scoped>.coupon{width: 100%;font-size: 0.3rem;span{margin: 0.1rem 0.3rem;}.coupmain{font-size: 0.3rem;.active{color: red;}.unactive{color: #000;}.icon{float:right;font-size: 12px;}}.select{color: aqua;}}
</style>