<!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. Django生成CSV文件

    1.生成CSV文件 有时候我们做的网站,需要将一些数据,生成有一个CSV文件给浏览器,并且是作为附件的形式下载下来.以下将讲解如何生成CSV文件. 2.生成小的CSV文件 这里将用一个生成小的CSV文 ...

  2. ps 和 grep 查找消除 grep自身查找（转载）

    用ps -def | grep查找进程很方便,最后一行总是会grep自己. $ ps -def | grep dragonfly-framework dean 5273 5272 0 15:23 pt ...

  3. mac截屏

    shift+command+3 : 截全屏 shift+command+4 : 出现十字架的坐标图标,画框截图

  4. python学习之路-第三天-函数

    函数 函数的定义关键字:def 使用global语句可以清楚地表明变量是在外面的块定义的 示例:(函数运行完毕后x的值是2) #!/usr/bin/python # Filename: func_gl ...

  5. c++ ScopeExitGuard

    说到Native Languages就不得不说资源管理,因为资源管理向来都是Native Languages的一个大问题,其中内存管理又是资源当中的一个大问题,由于堆内存需要手动分配和释放,所以必须确 ...

  6. oracle ORA-01704: string literal too long

    导出数据时,在SQL拼接处,提示 oracle ORA-01704: string literal too long sql:  WITH already_in AS (SELECT distinct ...

  7. springmvc ExceptionHandler

    /** * 1. 在 @ExceptionHandler 方法的入参中可以加入 Exception 类型的参数, 该参数即对应发生的异常对象 * 2. @ExceptionHandler 方法的入参中 ...

  8. python+selenium+API

    一.浏览器操作 1.浏览器最大化 driver.maximize_window() #将浏览器最大化显示 2.设置浏览器宽.高 driver.set_window_size(480, 800)#设置浏 ...

  9. C#基元类型取值范围对照表

    byte   无符号 8 为整数,值为0-255; sbyte   有符号8位整数,-128~127; short   有符号16位整数,范围在-32768~32767 ushort   无符号16位 ...

  10. Grid 行和列

    <Grid> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <Co ...