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>
效果:
12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式的更多相关文章
- 012——VUE中todos示例讲解class中应用表达式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 12.2 VUE学习之-if判断,实践加减input里的值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue学习8-for循环
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta ht ...
- Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
欢迎加入刚建立的社区:http://t.csdn.cn/Q52km 加入社区的好处: 1.专栏更加明确.便于学习 2.覆盖的知识点更多.便于发散学习 3.大家共同学习进步 3.不定时的发现金红包(不多 ...
- Vue学习笔记-组件通信-父传子(props中的驼峰标识)
在组件中,使用选项props来声明需要从父级接收到的数据.props的值有两种方式:方式一:字符串数组,数组中的字符串就是传递时的名称.方式二:对象,对象可以设置传递时的类型,也可以设置默认值等. & ...
- Vue学习-01
1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...
- vue学习笔记(四)事件处理器
前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...
- legend2---开发日志12(vue如何进一步学习)
legend2---开发日志12(vue如何进一步学习) 一.总结 一句话总结:还是得找教程(比如视频),自己摸索太浪费时间,也容易踩坑和抓不住重点 还是得找教程(比如视频),自己摸索太浪费时间,也容 ...
- 后端开发者的Vue学习之路(一)
目录 前言: iview组件库示例 element组件库示例 Vue的介绍 兼容性: 学习Vue需要的前置知识: MVVM模型 补充: 安装/导入 导入Vue 安装 两种方式的区别: HelloWor ...
随机推荐
- $(document).ready(function() { });
l $(document).ready(function() { }); 初始化jsp
- 示例1-苏宁每日自动登录打卡-结合Au3
public class SuningAutoClock { public static void AutoClock() throws IOException, InterruptedExcepti ...
- 2019年我的nodejs项目选型
选型项目比较激进.发现基于 go 语言的工具变多了.
- 去除pycharm的波浪线
PyCharm使用了较为严格的PEP8的检查规则,如果代码命名不规范,甚至多出的空格都会被波浪线标识出来,导致整个编辑器里铺满了波浪线,右边的滚动条也全是黄色或灰色的标记线,很是影响编辑.这里给大家分 ...
- TCP的连接和释放过程
TCP的连接和释放过程 1.三次握手的过程 1)主机A向主机B发送TCP连接请求数据包,其中包含主机A的初始序列号seq(A)=x.(其中报文中同步标志位SYN=1,ACK=0,表示这是一个TCP连接 ...
- iOS多线程系统整理 swift
多线程 是一个应用程序内多个代码的执行路径,执行线程,同时在同一时间里执行不同的任务. 三种: 1.NSTread 2.Cocoa NSOperation (NSOperation,NSOpera ...
- How to Install Apache Solr 4.5 on CentOS 6.4
By Shay Anderson on October 2013 Knowledge Base / Linux / How to Install Apache Solr 4.5 on Cent ...
- 父类和子类以及super关键字
super和this关键字的特点类似:super代表的是父类对象的引用. 当子父类的成员出现同名时,可以通过super来进行区分. 子类的构造方法中,通过super关键字调用父类的构造方法. publ ...
- swagger + springboot
参考文章: https://blog.csdn.net/xupeng874395012/article/details/68946676/ https://blog.csdn.net/hry2015 ...
- SQL 使用触发器常见错误
今天做代码审查时,看见以下一段触发器的创建脚本,我们一起来分析一下 create trigger [trigger_puClassRoomType] on [dbo].[puClassRoomType ...