012——VUE中todos示例讲解class中应用表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todos示例讲解class中应用表达式</title>
<script src="vue.js"></script>
</head>
<body>
<style>
.success{color: green}
.error{color: red;}
</style>
<div id="lantian">
<li v-for="v in news">
<span :class="v.status?'success':'error'">{{v.title}}</span>
<button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>
<button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>
</li>
</div>
<script>
var app = new Vue({
el: '#lantian',
methods:{
changeStatus:function (item,status) {
item.status=status;
}
},
data: {
news:[
{title:'蓝天科技',status:true},
{title:'www.lantian.com',status:true},
]
}
});
</script>
</body>
</html>
012——VUE中todos示例讲解class中应用表达式的更多相关文章
- 12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式
功能: 当点击按键时,改变当前循环数组里的status里的值, 判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮 判断staus里的当前的值来改变span标签里的字体颜色样式 <! ...
- Vue todos示例 在class中的应用表达式
本篇博客用到了v-if,v-on,v-for三个没有写到的知识点,以后会详细写三篇博客,详细写这三个方法的用处 直接上代码: <!doctype html> <html lang=& ...
- C,C++宏中#与##的讲解[转]
MoreWindows 专注于Windows编程 C,C++宏中#与##的讲解 文中__FILE__与示例1可以参见<使用ANSI C and Microsoft C++中常用的预定义宏> ...
- UML在需求分析与系统设计中之实战讲解
UML在需求分析与系统设计中之实战讲解(完整UML图形演示) 小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中 ...
- ReactNative之参照具体示例来看RN中的FlexBox布局
今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloW ...
- vue.js+webpack在一个简单实例中的使用过程demo
这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...
- 第四节：详细讲解Java中的类和面向对象思想
前言 大家好,给大家带来详细讲解Java中的类和面向对象思想的概述,希望你们喜欢 类和面向对象 在Java中怎样理解对象,创建对象和引用:什么是引用,对于基础学习的同学,要深入了解引用.示例:Stri ...
- 举例讲解Python中的死锁、可重入锁和互斥锁
举例讲解Python中的死锁.可重入锁和互斥锁 一.死锁 简单来说,死锁是一个资源被多次调用,而多次调用方都未能释放该资源就会造成死锁,这里结合例子说明下两种常见的死锁情况. 1.迭代死锁 该情况是一 ...
- 【前端面试】Vue面试题总结(持续更新中)
Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...
随机推荐
- Python3_实例汇总
1.Python数字求和 # -*- codingLuft-8 -*- #Filename: test.py #author by:Leq #用户输入数字 num1 = input("输入第 ...
- django之多表查询与创建
https://www.cnblogs.com/liuqingzheng/articles/9499252.html # 一对多新增数据 添加一本北京出版社出版的书 第一种方式 ret=Book.ob ...
- 转载一篇pandas和，mysql
http://pandas.pydata.org/pandas-docs/stable/comparison_with_sql.html#compare-with-sql-join http://bl ...
- ATA接口寄存器描写叙述
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/mao0514/article/details/32135815 ATA接口寄存器描写叙述 .AT ...
- qt下通过socket传送中文
zz 1.在main函数里我之前就加了一句QTextCodec::setCodecForTr( QTextCodec::codecForLocale() ); 现在再加一句QTextCodec::se ...
- 看github上有18万star的第一开源项目如何教你学前端编程的
作为 Github | star 第一开源项目,已经超过18万 star:比之前最火的bootstrap的10万star还要多出8w,freeCodeCamp 越来越受关注,建站两年时间不到已经近40 ...
- 覆盖bootstrap的样式
覆盖bootstrap的样式,很简单.在css中加上 !important 来更改自己样式的执行优先级!
- HDOJ 1257 最少拦截系统 【DP】
HDOJ 1257 最少拦截系统 [DP] Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- C语言预处理命令之条件编译（#ifdef,#else,#endif,#if等）
转自:http://www.kuqin.com/language/20090806/66164.html 预处理过程扫描源代码,对其进行初步的转换,产生新的源代码提供给编译器.可见预处理过程先于编译器 ...
- linux命令详解之（at）
在Linux下,有两个命令可以用来作为计划任务而执行,at:一次性定时任务计划执行crontab :每天定时任务计划执行 以下仅说一下一次性任务计划执行(at)要使用一次性任务计划,linux必须要有 ...