本篇博客用到了v-if,v-on,v-for三个没有写到的知识点,以后会详细写三篇博客,详细写这三个方法的用处

直接上代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js 使用数组和对象控制Class </title>

    <script src="vue.js"></script>

    <script src="node_modules/axios/dist/axios.js"></script>

    <script src="node_modules/lodash/lodash.js"></script>

</head>

<body>

<style>

    .error{color:red;}

    .success{color:green;}

</style>

<div id="ask"><!--vue不能控制body和html的标签-->

    <li v-for="v in list"><!--for循环语句以后再详细写-->

        <!--这个是今天主要的知识点-->

        <span :class="v.status?'success':'error'">{{v.title}}</span>

        <!--if:判断语句以后再详细写-->

        <button v-on:click="ChangeStatus(v,false)" v-if="v.status">删除</button>

        <!--on:绑定的函数必须在methods里写-->

        <button v-on:click="ChangeStatus(v,true)" v-if="!v.status">恢复</button>

    </li>

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        methods:{

            ChangeStatus:function (item,status) {

            item.status = status;

        }

    },

        data:{

            list:[

                {title:'简单记录',status:true},

                {title:'hello',status:true}

            ]

        },

    });

</script>

</body>

</html>

Vue todos示例 在class中的应用表达式的更多相关文章

  1. 012——VUE中todos示例讲解class中应用表达式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue在ASP.NET MVC中的进行前后端的交互

    Vue在ASP.NET MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下 ...

  3. Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法

    一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...

  4. Vue（1）- es6的语法、vue的基本语法、vue应用示例，vue基础语法

    一.es6的语法 1.let与var的区别 ES6 新增了let命令,用来声明变量.它的用法类似于var(ES5),但是所声明的变量,只在let命令所在的代码块内有效.如下代码: { let a = ...

  5. python 之CORS,VUE+rest_framework示例

    一.跨域     浏览器的同源策略                 ----对ajax请求进行阻拦                 ----对href属性读不阻拦        xhr=new XML ...

  6. zigbee学习:示例程序SampleApp中按键工作流程

    zigbee学习:示例程序SampleApp中按键工作流程 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN7 开发环境:IAR8. ...

  7. zigbee学习:示例程序SampleApp中通讯流程

    zigbee学习:示例程序SampleApp中通讯流程 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 参考链接: http://wjf88223.bl ...

  8. 安卓图表引擎AChartEngine(四) - 源码示例 嵌入Acitivity中的折线图

    前面几篇博客中都是调用ChartFactory.get***Intent()方法,本节讲的内容调用ChartFactory.get***View()方法,这个方法调用的结果可以嵌入到任何一个Activ ...

  9. ReactNative之结合具体示例来看RN中的的Timing动画

    今天继续更新RN相关的博客.上篇博客详细的聊了RN中关于Flex布局的相关东西,具体请参见<ReactNative之参照具体示例来看RN中的FlexBox布局>.本篇博客继续更新RN的动画 ...

随机推荐

  1. 在Windows系统中安装matplotlib，需要注意的问题

    matplotlib的下载地址:https://pypi.org/project/matplotlib/#files 以python3.6为例,适合的版本matplotlib-3.1.1-cp36-c ...

  2. Educational Codeforces Round 37 (Rated for Div. 2) E. Connected Components? 图论

    E. Connected Components? You are given an undirected graph consisting of n vertices and edges. Inste ...

  3. iOpenWorskSDK下载和答疑贴

    1 iOpenWorksSDK对VS2013-VS2017的支持插件 https://files.cnblogs.com/files/baihmpgy/iOpenWorksSDK.vsix.zip 2 ...

  4. SourceTree3.2.6版本跳过注册办法

    一.去sourceTree官网下载最新的包 官网:https://www.sourcetreeapp.com/windows版下载地址:https://product-downloads.atlass ...

  5. 07-Django模板（1）

    模板介绍 作为web框架,Django提供了模板,用于编写html代码(嵌入模板代码,更快更方便的完成页面开发,在通过视图中渲染模板,将最终生成的页面返回给浏览器(客户端)).模板是关于外表的渲染的, ...

  6. PHP 扩展与 ZEND 引擎的整合

    PHP 扩展是对 PHP 功能的一个补充,编写完 PHP 扩展以后, ZEND 引擎需要获取到 PHP 扩展的信息,比如 phpinfo() 函数是如何列出 PHP 扩展的信息,PHP 扩展中的函数如 ...

  7. Java设计模式：Builder(构建器)模式

    概念定义 Builder模式是一步一步创建一个复杂对象的创建型模式.该模式将构建复杂对象的过程和它的部件解耦,使得构建过程和部件的表示隔离开来. 应用场景 对象创建过程比较复杂,或对创建顺序或组合有依 ...

  8. Python将list中的unicode转换成中文显示

    有这样一个列表: list = [{'channel_id': -3, 'name': u'\u7ea2\u5fc3\u5146\u8d6b'}, {u'seq_id': 0, u'name_en': ...

  9. 【IDEA】(2)---MAC代码模版

    IDEA(2)-MAC代码模版 IDEA提供了许多的自带代码模版,这些模版主要是对于我们经常开发用到的代码制作成一个模版,比如for循环,这个是经常会用到的代码,如果没有代码模版,我们需要一个一个手动 ...

  10. Core源码（三） Lazy<T>

    Lazy<T>解决什么问题? 1.大对象加载 考虑下面的需求,有个对象很大,创建耗时,并且要在托管堆上分配一大块空间.我们当然希望,用到它的时候再去创建.也就是延迟加载,等到真正需要它的时 ...