<!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. 前端(css引入的3中方式)

    一.css引入的三种方式 行间式 在标签头部的style属性内 属性值满足的是css语法 属性值用key:value形式赋值,value具有单位 属性值之间用;隔开 外联式(企业开发中使用这种方式) ...

  2. “技术产品”面向市场的表达方法思辨——BY Me

    “技术产品”面向市场的表达方法思辨 首先,我们来看看“技术产品”在面向市场去表达的时候,怎么表述是容易被市场接受和理解的,“目标受众是谁?”.“市场切入点是什么?”,做到有的放矢,打动目标受众.切中其 ...

  3. 0501-Hystrix保护应用-超时机制、断路器模式简介

    一.概述 hystrix对应的中文名字是“豪猪”,豪猪周身长满了刺,能保护自己不受天敌的伤害,代表了一种防御机制,这与hystrix本身的功能不谋而合,因此Netflix团队将该框架命名为Hystri ...

  4. 快速入门Python中文件读写IO是如何来操作外部数据的?

    读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...

  5. 关于shared pool的深入探讨(一) 【转载】

    关于shared pool的深入探讨(一)   作者:eygle |English [转载时请标明出处和作者信息]|[恩墨学院 OCM培训传DBA成功之道]链接:http://www.eygle.co ...

  6. 微信小程序 使用腾讯地图SDK详解及实现步骤

    信小程序 使用腾讯地图SDK详解及实现步骤    微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1 ...

  7. ExtJS + fileuploadfield实现文件上传

    后台服务端接收文件的代码: /** * 后台上传文件处理Action */ @RequestMapping(value = "/uploadFile", method=Reques ...

  8. websocket redis实现集群即时消息聊天

    websocket与redismq实现集群消息聊天 1.application.properties server.port=8081 #thymeleaf配置 #是否启用模板缓存. spring.t ...

  9. hadoop11----socket

    package cn.itcast.bigdata.socket; import java.io.BufferedReader; import java.io.InputStream; import ...

  10. 【Flask】Flask Restful api

    ### 安装: Flask-Restful需要在Flask 0.8以上的版本,在Python2.6或者Python3.3上运行.通过pip install flask-restful即可安装. ### ...