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 ...
随机推荐
- django下的csrf防御机制
CSRF 1.什么是CSRF? CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写 ...
- PAT 1047 Student List for Course[一般]
1047 Student List for Course (25 分) Zhejiang University has 40,000 students and provides 2,500 cours ...
- socketserver 源码剖析：
socketserver 源码剖析[有图有真相]: (一).Socketserver 内部流程调用图: 详解: 1.self.RequestHandlerClass() = MyCla ...
- go——结构体（二）
Go语言是一种静态类型的编程语言.这意味着,编译器需要在编译时知晓程序里每个值的类型. 如果提前知道类型信息,编译器就可以确保程序合理的使用值. 这有助于减少潜在的内存异常和bug,并且使编译器有机会 ...
- Delphi 正则表达式语法(2): 或者与重复
Delphi 正则表达式语法(2): 或者与重复 // | 号的使用, | 是或者的意思 var reg: TPerlRegEx; begin reg := TPerlRegEx.Create ...
- hibernatetemplate find条件查询方法
一.find(String queryString); 示例:this.getHibernateTemplate().find("from bean.User"); 返回所有Use ...
- 29最小的K个数
题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 思路: 利用快速排序的partion 来解决 如果基于数字的第 ...
- 112. Path Sum （判断路径和是否等于某值）
Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up a ...
- display:inline与display:block——行内元素显示与块级元素显示
display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...
- nginx日志分割总结
nginx日志自己不会进行分个,所有日志都会累积的记录在 access.log,error.log 中,当请求量大,一天就能到几百兆,如果不进行分给,对日志的查看和写入性能都有影响. 1. 编写脚本n ...