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 ...
随机推荐
- sql server 中having 的使用注意事项
1.having 中不能使用未参与分列的组,having 不能替代where 作用不一样,having是对组进行过滤,where是每条记录进行过滤. 2.having 是对Group By 的条件分组 ...
- go——数组(二)
1.内部实现 在Go语言里,数组是一个长度固定的数据类型,用于存储一段具有相同的类型的元素的连续块. 数组存储的类型可以是内置类型,如整型或字符串,也可以是某种结构类型. 灰格子代表数组里面的元素,每 ...
- image_Magic
http://www.charry.org/docs/linux/ImageMagick/ImageMagick.html mogrify -sample 25% *.jpg 批量处理图片 conv ...
- 学会这些你就是Android 开发高手了!
世界范围内,很多移动设备都是Android系统,Android开发可以说很有前景.对于安卓开发者来说,如果有个地方可以找到Android开发所有的资料,不需要一个网站一个网站的搜索,简直是件很开心的事 ...
- Nullable类型的问题处理
public class Calc { public long? Number { get; set; } public long Number1 { get; set; } public long ...
- python约束 与MD5加密写法
python 中约束写法有两种 1 常用的通过继承关系主动抛出异常 2 通过抽象类+抽象方法 1 常用的通过继承关系主动抛出异常写法 在本send方法中报错不会抛出异常, class BaseMes ...
- JavaScript的消息机制
JavaScript本身是单线程的,但它却是事件驱动的.类似Windows窗体应用程序,它也需要消息队列机制来实现.程序的执行并不是连续的,绝大多数时间都在等待消息.每次执行执行程序都是在响应消息,这 ...
- Spring中的@Transactional以及事务的详细介绍
首先来说下事务,说到事务就不得不说它的四个特性(acid): 一.特性 1.原子性(atomicity):一个事务当作为一个不可分割的最小工作单元,一组操作要么全部成功,要么全部失败. 2.一致性(c ...
- Graph_Master(连通分量_A_双连通分量+桥)
hdu 5409 题目大意:给出一张简单图,求对应输入的m条边,第i-th条边被删除后,哪两个点不连通(u,v,u<v),若有多解,使得u尽量大的同时v尽量小. 解题过程:拿到题面的第一反应缩点 ...
- Quartz(1)--框架简介
一.概述 Quartz是一个完全由Java编写的开源任务调度的框架,通过触发器设置作业定时运行规则,控制作业的运行时间.主要用来执行定时任务,如:定时发送信息.定时生成报表等等. 二.为什么会选择Qu ...