<!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中应用表达式的更多相关文章

  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. MySQL数据库Date型数据插入问题

    MySQL数据库中,Date型数据插入问题,总是提示如下错误: “java.util.Date cannot be cast to java.sql.Date” 解决办法: 1.首先,获取Date型数 ...

  2. loadrunner winsocket sent buffer 乱码

    data.ws里手写的xml参数,调试脚本时一直显示乱码,解决方法如下: tools-recording options--sockets--winsock下: EBCID--translation ...

  3. Djngo Rest Framework

    目录: 认证和授权 用户访问次数/频率 版本 解析器 序列化 分页 路由系统 视图 渲染器 一. 什么是Restful REST与技术无关,代表的是一种软件架构风格,REST是Representati ...

  4. 解释一下python中的关系运算符

    关系运算符用于比较两个值 1.小于号,如果左边的值较小,则返回Trueprint('hi'<'Hi')#False 2.大于号,如果左边的值较大,则返回Trueprint(1.1+2.2> ...

  5. (转)Nginx反向代理设置 从80端口转向其他端口

    from :http://www.cnblogs.com/wuyou/p/3455381.html Nginx反向代理设置 从80端口转向其他端口   反向代理(Reverse Proxy)方式是指以 ...

  6. Python框架之Tornado（请求）

    概述 本篇就来详细介绍tornado服务器(socket服务端)是如何接收用户请求数据以及如果根据用户请求的URL处理并返回数据,也就是上图的3系列所有步骤,如上图[start]是一个死循环,其中利用 ...

  7. Apache 域名跳转配置

    域名跳转 就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等 .   参数格式 参数: Apache mod_rewrite 规 ...

  8. java常见异常（更新中）

    Java的异常分为两种,一种是运行时异常(RuntimeException),一种是非运行异常也叫检查式异常(CheckedException) .NullPointerException 空指针异常 ...

  9. Number使用笔记

    Numbe函数用于将对象转换为数字 0          0 null       0 空  0 ""         0 true      1 false     0 date ...

  10. Spring_管理 Bean 的生命周期

    beans-cycle.xml <?xml version="1.0" encoding="UTF-8"?><beans xmlns=&quo ...