1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>todos示例讲解class中应用表达式</title>
  6. <script src="vue.js"></script>
  7. </head>
  8. <body>
  9. <style>
  10. .success{color: green}
  11. .error{color: red;}
  12. </style>
  13. <div id="lantian">
  14. <li v-for="v in news">
  15. <span :class="v.status?'success':'error'">{{v.title}}</span>
  16. <button v-on:click="changeStatus(v,false)" v-if="v.status">删除</button>
  17. <button v-on:click="changeStatus(v,true)" v-if="!v.status">恢复</button>
  18. </li>
  19. </div>
  20. <script>
  21. var app = new Vue({
  22. el: '#lantian',
  23. methods:{
  24. changeStatus:function (item,status) {
  25. item.status=status;
  26. }
  27. },
  28. data: {
  29. news:[
  30. {title:'蓝天科技',status:true},
  31. {title:'www.lantian.com',status:true},
  32. ]
  33. }
  34. });
  35. </script>
  36. </body>
  37. </html>

  

012——VUE中todos示例讲解class中应用表达式的更多相关文章

  1. 12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式

    功能: 当点击按键时,改变当前循环数组里的status里的值, 判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮 判断staus里的当前的值来改变span标签里的字体颜色样式 <! ...

  2. Vue todos示例 在class中的应用表达式

    本篇博客用到了v-if,v-on,v-for三个没有写到的知识点,以后会详细写三篇博客,详细写这三个方法的用处 直接上代码: <!doctype html> <html lang=& ...

  3. C,C++宏中#与##的讲解[转]

    MoreWindows 专注于Windows编程 C,C++宏中#与##的讲解 文中__FILE__与示例1可以参见<使用ANSI C and Microsoft C++中常用的预定义宏> ...

  4. UML在需求分析与系统设计中之实战讲解

    UML在需求分析与系统设计中之实战讲解(完整UML图形演示) 小序: 从学生时代就接触到UML,几年的工作中也没少使用,各种图形的概念.图形的元素和属性,以及图形的画法都不能说不熟悉.但是怎样在实际中 ...

  5. ReactNative之参照具体示例来看RN中的FlexBox布局

    今天是重阳节,祝大家节日快乐,今天继续更新RN相关的博客.上篇博客<ReactNative之从HelloWorld中看环境搭建.组件封装.Props及State>中我们通过一个HelloW ...

  6. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  7. 第四节:详细讲解Java中的类和面向对象思想

    前言 大家好,给大家带来详细讲解Java中的类和面向对象思想的概述,希望你们喜欢 类和面向对象 在Java中怎样理解对象,创建对象和引用:什么是引用,对于基础学习的同学,要深入了解引用.示例:Stri ...

  8. 举例讲解Python中的死锁、可重入锁和互斥锁

    举例讲解Python中的死锁.可重入锁和互斥锁 一.死锁 简单来说,死锁是一个资源被多次调用,而多次调用方都未能释放该资源就会造成死锁,这里结合例子说明下两种常见的死锁情况. 1.迭代死锁 该情况是一 ...

  9. 【前端面试】Vue面试题总结(持续更新中)

    Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...

随机推荐

  1. sql server 中having 的使用注意事项

    1.having 中不能使用未参与分列的组,having 不能替代where 作用不一样,having是对组进行过滤,where是每条记录进行过滤. 2.having 是对Group By 的条件分组 ...

  2. go——数组(二)

    1.内部实现 在Go语言里,数组是一个长度固定的数据类型,用于存储一段具有相同的类型的元素的连续块. 数组存储的类型可以是内置类型,如整型或字符串,也可以是某种结构类型. 灰格子代表数组里面的元素,每 ...

  3. image_Magic

    http://www.charry.org/docs/linux/ImageMagick/ImageMagick.html mogrify -sample 25% *.jpg  批量处理图片 conv ...

  4. 学会这些你就是Android 开发高手了!

    世界范围内,很多移动设备都是Android系统,Android开发可以说很有前景.对于安卓开发者来说,如果有个地方可以找到Android开发所有的资料,不需要一个网站一个网站的搜索,简直是件很开心的事 ...

  5. Nullable类型的问题处理

    public class Calc { public long? Number { get; set; } public long Number1 { get; set; } public long ...

  6. python约束 与MD5加密写法

    python 中约束写法有两种 1 常用的通过继承关系主动抛出异常  2 通过抽象类+抽象方法 1 常用的通过继承关系主动抛出异常写法 在本send方法中报错不会抛出异常, class BaseMes ...

  7. JavaScript的消息机制

    JavaScript本身是单线程的,但它却是事件驱动的.类似Windows窗体应用程序,它也需要消息队列机制来实现.程序的执行并不是连续的,绝大多数时间都在等待消息.每次执行执行程序都是在响应消息,这 ...

  8. Spring中的@Transactional以及事务的详细介绍

    首先来说下事务,说到事务就不得不说它的四个特性(acid): 一.特性 1.原子性(atomicity):一个事务当作为一个不可分割的最小工作单元,一组操作要么全部成功,要么全部失败. 2.一致性(c ...

  9. Graph_Master(连通分量_A_双连通分量+桥)

    hdu 5409 题目大意:给出一张简单图,求对应输入的m条边,第i-th条边被删除后,哪两个点不连通(u,v,u<v),若有多解,使得u尽量大的同时v尽量小. 解题过程:拿到题面的第一反应缩点 ...

  10. Quartz(1)--框架简介

    一.概述 Quartz是一个完全由Java编写的开源任务调度的框架,通过触发器设置作业定时运行规则,控制作业的运行时间.主要用来执行定时任务,如:定时发送信息.定时生成报表等等. 二.为什么会选择Qu ...