Vue todos示例 在class中的应用表达式
本篇博客用到了v-if,v-on,v-for三个没有写到的知识点,以后会详细写三篇博客,详细写这三个方法的用处
直接上代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js 使用数组和对象控制Class </title>
<script src="vue.js"></script>
<script src="node_modules/axios/dist/axios.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
</head>
<body>
<style>
.error{color:red;}
.success{color:green;}
</style>
<div id="ask"><!--vue不能控制body和html的标签-->
<li v-for="v in list"><!--for循环语句以后再详细写-->
<!--这个是今天主要的知识点-->
<span :class="v.status?'success':'error'">{{v.title}}</span>
<!--if:判断语句以后再详细写-->
<button v-on:click="ChangeStatus(v,false)" v-if="v.status">删除</button>
<!--on:绑定的函数必须在methods里写-->
<button v-on:click="ChangeStatus(v,true)" v-if="!v.status">恢复</button>
</li>
</div>
<script>
var app = new Vue({ //实例化vue
el:'#ask',//vue控制id为ask的元素,
methods:{
ChangeStatus:function (item,status) {
item.status = status;
}
},
data:{
list:[
{title:'简单记录',status:true},
{title:'hello',status:true}
]
}, });
</script>
</body>
</html>
Vue todos示例 在class中的应用表达式的更多相关文章
- 012——VUE中todos示例讲解class中应用表达式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue在ASP.NET MVC中的进行前后端的交互
Vue在ASP.NET MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下 ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例,vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- Vue(1)- es6的语法、vue的基本语法、vue应用示例,vue基础语法
一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...
- python 之CORS,VUE+rest_framework示例
一.跨域 浏览器的同源策略 ----对ajax请求进行阻拦 ----对href属性读不阻拦 xhr=new XML ...
- zigbee学习:示例程序SampleApp中按键工作流程
zigbee学习:示例程序SampleApp中按键工作流程 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:IAR8. ...
- zigbee学习:示例程序SampleApp中通讯流程
zigbee学习:示例程序SampleApp中通讯流程 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 参考链接: http://wjf88223.bl ...
- 安卓图表引擎AChartEngine(四) - 源码示例 嵌入Acitivity中的折线图
前面几篇博客中都是调用ChartFactory.get***Intent()方法,本节讲的内容调用ChartFactory.get***View()方法,这个方法调用的结果可以嵌入到任何一个Activ ...
- ReactNative之结合具体示例来看RN中的的Timing动画
今天继续更新RN相关的博客.上篇博客详细的聊了RN中关于Flex布局的相关东西,具体请参见<ReactNative之参照具体示例来看RN中的FlexBox布局>.本篇博客继续更新RN的动画 ...
随机推荐
- day(66)作业
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- angular路由事件
Angular 4检测路由变化,可以使用router.events来监听: 支持的事件类型: NavigationStart:导航开始 NavigationEnd:导航结束 NavigationCan ...
- #undef常用法
Copy from C语言中#undef的语法是: #undef 标识符 用来将前面定义的宏标识符取消定义. 整理了如下几种常见用法,如果以后发现其他的再添加进来. 1.在一个程序块中用完宏定义后,为 ...
- php处理curl的返回结果
最简单的方式: json_decode($res,true): 结果都是:
- 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 8-1
18.6.5 获取数据 PDO的数据获取方法与其他数据库扩展非常类似,只要成功执行SELECT查询,都会有结果集对象生成.不管使用PDO对象中的query()方法,还是使用prepare()和exe ...
- PHPexcel导入数据的时候出现object解决方法
打印其他数据都是正常的,就这个是一个对象 从表格里面看不出问题 后面找到原因是表格里那个名字 李珊珊 周围有空白字符,去掉之后就能正常导入, 解决方法: 找到导入文件的那个方法 ...
- selectpage选择订单的时候,订单数量和金额会动态改变
1. 2. HTML部分: JS: PHP获取数据并return json
- [IDA]批量载入结构体
我们之前介绍了如果单独定义一个C结构体并转换为IDA中的结构体. 但是,在内核中有很多庞大的结构体,一环接着一环,手动导入不现实. 还存在一个问题,可能大小格式不匹配. 之前有一位老哥推荐我一个工具: ...
- SpringBoot 2.X从0到1实现邮件发送功能
Spring中提供了JavaMailSender接口实现邮件发送功能,在SpringBoot2.X中也封装了发送邮件相关的Starter并且提供了自动化配置. 本文目录 一.添加对应的Starter二 ...
- python基础(26):类的成员(字段、方法、属性)
1. 字段 字段:包括普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同. 普通字段属于对象 静态字段属于类 字段的定义和使用: class Province: # ...