Vue todos示例 在class中的应用表达式
时间:2019-10-06
本文章向大家介绍Vue todos示例 在class中的应用表达式,主要包括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:'mykeji.net',status:true} ] }, }); </script> </body> </html>
原文地址:https://www.cnblogs.com/tommymarc/p/11627454.html
- POJ 3694 Network(Tarjan求割边+LCA)
- java之Cookie详解
- Ajax详解
- 1611: [Usaco2008 Feb]Meteor Shower流星雨
- 3893: [Usaco2014 Dec]Cow Jog
- 3892: [Usaco2014 Dec]Marathon
- BZOJ 2793: [Poi2012]Vouchers(调和级数)
- 3891: [Usaco2014 Dec]Piggy Back
- Java8-如何构建一个Stream
- 2016: [Usaco2010]Chocolate Eating
- javascript 闭包详解
- 3016: [Usaco2012 Nov]Clumsy Cows
- POJ 3207 Ikki's Story IV - Panda's Trick(2-SAT)
- 3359: [Usaco2004 Jan]矩形
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- epoll,求知者离我近点
- SOCKET网络编程 (通俗易懂入门篇)
- 进程 · 全家桶
- Posix线程 它们那一大家子事儿,要觉得好你就收藏进被窝慢慢看(2)
- Posix线程 它们那一大家子事儿,要觉得好你就收藏进被窝里慢慢看 (1)
- 种树:二叉树、二叉搜索树、AVL树、红黑树、哈夫曼树、B树、树与森林
- 【Linux内核】进程管理
- Django后台管理界面修改(代码修改)
- OpsnSSH抓包分析 | SSH协议分析
- 搭建简易的物联网服务端和客户端-第三次增补(二十二)
- ReentrantLock源码解析
- Nodejs连接PostgreSQL
- ReentrantReadWriteLock源码解析
- LockSupport源码解析
- Nodejs定时自动截图并发送给邮箱