本篇博客用到了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. day（66）作业

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. angular路由事件

    Angular 4检测路由变化,可以使用router.events来监听: 支持的事件类型: NavigationStart:导航开始 NavigationEnd:导航结束 NavigationCan ...

  3. #undef常用法

    Copy from C语言中#undef的语法是: #undef 标识符 用来将前面定义的宏标识符取消定义. 整理了如下几种常见用法,如果以后发现其他的再添加进来. 1.在一个程序块中用完宏定义后,为 ...

  4. php处理curl的返回结果

    最简单的方式: json_decode($res,true): 结果都是:

  5. 《细说PHP》第四版 样章 第18章 数据库抽象层PDO 8-1

    18.6.5  获取数据 PDO的数据获取方法与其他数据库扩展非常类似,只要成功执行SELECT查询,都会有结果集对象生成.不管使用PDO对象中的query()方法,还是使用prepare()和exe ...

  6. PHPexcel导入数据的时候出现object解决方法

    打印其他数据都是正常的,就这个是一个对象 从表格里面看不出问题 后面找到原因是表格里那个名字  李珊珊  周围有空白字符,去掉之后就能正常导入,         解决方法:   找到导入文件的那个方法 ...

  7. selectpage选择订单的时候,订单数量和金额会动态改变

    1. 2. HTML部分: JS: PHP获取数据并return json

  8. [IDA]批量载入结构体

    我们之前介绍了如果单独定义一个C结构体并转换为IDA中的结构体. 但是,在内核中有很多庞大的结构体,一环接着一环,手动导入不现实. 还存在一个问题,可能大小格式不匹配. 之前有一位老哥推荐我一个工具: ...

  9. SpringBoot 2.X从0到1实现邮件发送功能

    Spring中提供了JavaMailSender接口实现邮件发送功能,在SpringBoot2.X中也封装了发送邮件相关的Starter并且提供了自动化配置. 本文目录 一.添加对应的Starter二 ...

  10. python基础(26):类的成员(字段、方法、属性)

    1. 字段 字段:包括普通字段和静态字段,他们在定义和使用中有所区别,而最本质的区别是内存中保存的位置不同. 普通字段属于对象 静态字段属于类 字段的定义和使用: class Province: # ...