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 ...
随机推荐
- 从SNE到t-SNE再到LargeVis
http://bindog.github.io/blog/2016/06/04/from-sne-to-tsne-to-largevis/
- python爬取当当网的书籍信息并保存到csv文件
python爬取当当网的书籍信息并保存到csv文件 依赖的库: requests #用来获取页面内容 BeautifulSoup #opython3不能安装BeautifulSoup,但可以安装Bea ...
- 第一节、Alex 讲解 python+mysql 交互；
Python Mysql 交互 A.Alex 的语法展示: import MySQLdb try: conn=MySQL.connect(host='localhost',user='ro ...
- go——结构体（二）
Go语言是一种静态类型的编程语言.这意味着,编译器需要在编译时知晓程序里每个值的类型. 如果提前知道类型信息,编译器就可以确保程序合理的使用值. 这有助于减少潜在的内存异常和bug,并且使编译器有机会 ...
- php优化，操作码优化，缓存优化
一.php缓存加速器软件种类 xcache,eaccelerator,zend,apc如何选择:建议xcache,eaccelerator,二选一,首选xcachexcache更快 二.php缓存加速 ...
- Python:笔记(5)——错误、调试和测试
Python:笔记(5)——错误.调试和测试 错误处理 1.TRY语句 这个和Java中的语法是及其相似的,catach换成except. 说明:同样,不管有没有错误,fianlly都会执行的! 补充 ...
- jsp、freemarker、velocity对比
在java领域.表现层技术主要有三种:jsp.freemarker.velocity. jsp是大家最熟悉的技术长处:1.功能强大,能够写java代码2.支持jsp标签(jsp tag)3.支持表达式 ...
- iOS 和服务端交互 数据加密策略
总体逻辑: 客户端:对称加密数据,上传...回执对称解密 同理服务端:获取上传数据 对称解密 ...下发:对称加密 当且仅当登录接口和 拉新(更新nonce 和 key的接口)是对称加密上传 非对称解 ...
- Java8中时间日期库的20个常用使用示例
除了lambda表达式,stream以及几个小的改进之外,Java 8还引入了一套全新的时间日期API,在本篇教程中我们将通过几个简单的任务示例来学习如何使用Java 8的这套API.Java对日期, ...
- WPF MVVM模式下ComboBox级联效果 选择第一项
MVVM模式下做的省市区的级联效果.通过改变ComboBox执行命令改变市,区. 解决主要问题就是默认选中第一项 1.首先要定义一个属性,继承自INotifyPropertyChanged接口.我这里 ...