12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式

功能:

当点击按键时,改变当前循环数组里的status里的值,

判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮

判断staus里的当前的值来改变span标签里的字体颜色样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue</title>
    <link rel="stylesheet" href="">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
    <style type="text/css">
        .success{
            color: green;
        }
        .error{
            color:red;
        }
    </style>
</head>
<body>
<div id="vue">
    <!--循环app里的news-->
    <li v-for="v in news">
        <!--当前数组v里的status为ture是就用sucess样式,否则用error里的样式-->
        <span :class="v.status?'success':'error'">{{v.title}}</span>
        <!--点击时把当着数组传给changeStatus方法,并把要改变的值也传去,让其在方法里改变当前数组里的值-->
        <button @click="changeStatus(v,false)" v-if="v.status">删除</button> <!--判断有status时才显示按钮-->
        <button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>
    </li>

</div>
</body>
<script type="text/javascript">
    var app=new Vue({
        el:'#vue',
        methods:{
            changeStatus(item,status){

                console.log(item); //item代表传过来循环的当前数组
                console.log(status); //要改变的状态
                item.status=status; //把当前数组里的status重新赋值

            }
        },
        data:{
            news:[
                {title:'haha',status:true},
                {title:'hehe',status:false},
            ],
        },
    });
</script>
</html>

效果:

posted @ 2019-01-06 11:50  HaimaBlog  阅读(1438)  评论(0)  编辑  收藏  举报