本篇博客用到了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. jenkins配置publish over ssh遇到的问题

    一.背景 目标 本篇文章主要是说明自己在配置jenkins的publish over ssh插件所遇到的问题.本次主要是windows下的jenkins通过ssh的方式访问我本地虚拟机的ubuntu系 ...

  2. HTML连载52-网易注册界面之上部完成、中部初探

    一.看一下注释即可,都是前面学到的知识,然后进行整合完成网页的制作,未完待续,这个网易界面跨度可大三天. <!DOCTYPE html> <html lang="en&qu ...

  3. 【STM32H7教程】第16章 STM32H7必备的HAL库API（重要）

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第16章       STM32H7必备的HAL库API(重要 ...

  4. 如何使用numpy实现一个全连接神经网络？（上）

    全连接神经网络的概念我就不介绍了,对这个不是很了解的朋友,可以移步其他博主的关于神经网络的文章,这里只介绍我使用基本工具实现全连接神经网络的方法. 所用工具: numpy == 1.16.4 matp ...

  5. 微信小程序反编译

    看到一个有意思的小程序,想了解是如何实现的,于是找了反编译方法. 安装adb驱动 百度安装adb驱动, 设计设置开发者模式,连接电脑. -> % adb devices List of devi ...

  6. 死磕 java同步系列之ReentrantLock VS synchronized——结果可能跟你想的不一样

    问题 (1)ReentrantLock有哪些优点? (2)ReentrantLock有哪些缺点? (3)ReentrantLock是否可以完全替代synchronized? 简介 synchroniz ...

  7. VS2017安装使用Easyx时出现的问题及解决方法

    EasyX 是针对 Visual C++ 的绘图库,在初学 C 语言实现图形和游戏编程.图形学.分形学等需要绘图实践的领域有一定应用. EasyX 库在 Visual C++ 中模拟了 Turbo C ...

  8. NET EF 连接Oracle 的配置方法记录

    主要记录下如何在EF 中连接Oracle s数据库,很傻瓜式,非常简单,但是不知道的童鞋,也会搞得很难受,我自己就是 1.创一个控制台程序,并且添加  Oracle.ManagedDataAccess ...

  9. Nagios 钉钉报警

    第一章 创建钉钉应用(用于发送报警信息给单独某个用户) 打开钉钉管理后台: https://oa.dingtalk.com 创建成功后需要记录三个值"AgentID"," ...

  10. 史上最详细JVM，Java内存区域讲解

    本人免费整理了Java高级资料,一共30G,需要自己领取:传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 运行时数据区域 JVM载执行Jav ...