<!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. decorator ＆ generator ＆ iterator

    装饰器(decorator): @staticmethod @classmethod 都既可以使用类名访问,也可以使用对象名访问, 但classmethod在定义时需要cls参数 生成器(genera ...

  2. nginx规则总结

    location正则写法 一个示例: location = / { # 精确匹配 / ,主机名后面不能带任何字符串 [ configuration A ] } location / { # 因为所有的 ...

  3. image_Magic

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

  4. 关于WinIO.DLL的键盘输入模拟

    关于WinIO.DLL的键盘输入模拟 最近在找键盘模拟的方式,最后在网上找到了一个WinIO.DLL的IO键盘模拟按键的方式.但是居然那个方法是有问题的.我造了全局的hook监视键盘信息,发现它只是有 ...

  5. URAL - 1902 Neo-Venice

    题目: Mars was the first planet colonized by humans. After a long terraforming process its appearance ...

  6. 【持续更新】ultraedit工具使用总结

    常用设置及快捷键 设置Ultraedit自动换行: 永久修改: 点击菜单栏的“高级→配置”,找到“编辑器→自动换行/制表符设置”,选择“默认为每个文件启用自动换行”,ok. 临时修改: 快捷键 Ctr ...

  7. linux java环境配置

    一.安装 创建安装目录,在/usr/java下建立安装路径,并将文件考到该路径下: # mkdir /usr/java 1.jdk-6u11-linux-i586.bin 这个是自解压的文件,在lin ...

  8. $微信小程序开发实践点滴——接入Bmob后端云

    Bmob后端云官网:http://www.bmob.cn/ 微信公众平台官网:https://mp.weixin.qq.com/ 微信小程序官方开发文档:https://mp.weixin.qq.co ...

  9. js原型 作用域

    了解JavaScript原型链之前首先肯定要知道什么是原型. JavaScript中,原型是一个对象,通过原型可以实现属性的继承.既然原型是一个对象,那么任何一个对象都可以称为原型吗?是,记住它.什么 ...

  10. P4949 最短距离(基环树+树链剖分)

    题目 P4949 最短距离 做法 先把非树边提出来 查询\((x,y)\)的最短距离就分类查询:树上\((x,y)\)距离,经过非树边距离 带边权查询链长,一个烂大街的套路:树链剖分,节点维护树边距离 ...