vue实现单选按钮

最新推荐文章于 2024-09-05 11:22:00 发布

邱志刚

最新推荐文章于 2024-09-05 11:22:00 发布

阅读量3.7k

点赞数 1

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_42957741/article/details/107205900

版权

vue.js 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

<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.log(this.momtlist);
        },
       changeCss(item) {
            if (!item.selected) {
                this.momtlist[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.$route.meta.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>