12.VUE学习之-循环li,if判断示例讲解class中应用表达式
Posted haima
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了12.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 v-on: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:function(item,status){
console.log(item); //item代表传过来循环的当前数组
console.log(status); //要改变的状态
item.status=status; //把当前数组里的status重新赋值
}
},
data:{
news:[
{title:‘haha‘,status:true},
{title:‘hehe‘,status:true},
],
},
});
</script>
</html>效果:
以上是关于12.VUE学习之-循环li,if判断示例讲解class中应用表达式的主要内容，如果未能解决你的问题，请参考以下文章