首页 > 其他 > 详细

vue切换样式

时间:2018-07-19 11:42:31      阅读:160      评论:0      收藏:0      [点我收藏+]

在vue中使用事件来切换绑定的class样式,在vue-cli脚手架中的Home.vue中

<template>
    <div id="main">
        <li v-for="v in news">
            <span :class="v.status ? ‘success‘ : ‘error del‘">{{v.title}}</span>       
            <button @click="switchState(v,true)" v-if="!v.status">恢复</button>  
            <button @click="switchState(v,false)" v-if="v.status">删除</button>     
        </li>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                news:[
                    {title:‘rock‘,status:true},
                    {title:‘cena‘,status:true},
                    {title:‘randy‘,status:true}
                ]
            };
        },
        methods:{
            switchState(v,status){
                v.status = status;
            }
        }
    }
</script>

<style>
.success{
    color:green;    
}

.error{
    color:red;
}

.del{
    text-decoration:line-through;
}

</style>

效果如下:

技术分享图片

 

vue切换样式

原文:https://www.cnblogs.com/wntd/p/9334801.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!