本篇博客用到了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. C++ int型负数除法取余问题

    1:关于除法,不管是正数还是负数都是向0取整的:10/4 = 2,10/(-4) = -2 2:负数取余,通过取模来判定 |小| % |大| = |小| 符号同前    |大| % |小| = |余| ...

  2. IT兄弟连 Java语法教程 数据类型 进制转换

    ●  正十进制转换为二进制 拆分法,将十进制整数拆分为若干个二进制权重的和,若有该权重则下面写1,否则写0.如: 34 = 32 + 2 128 64 32 16 8 4 2 1 0  0  1  0 ...

  3. selenium三大切换的骚操作之显性等待

    一.handle窗口切换 当点击某个元素后,会重新生成一个新的页签,但此时我们的操作仍然在原先的窗口当中,如果要在新的窗口继续操作元素,那么就要用到handle窗口切换的方法. 常用方法: windo ...

  4. Jenkins登录后空白页

    进入.jenkins所在的目录 编辑config.xml文件 重启jenkins

  5. Linux 下编写一个 PHP 扩展

        假设需求 开发一个叫做 helloWord 的扩展. 扩展里有一个函数,helloWord(). echo helloWord('Tom'); //返回:Hello World: Tom 本地 ...

  6. nodejs环境下的socket通信

    结构: socket是应用层和传输层的桥梁.(传输层之上的协议所涉及的数据都是在本机处理的,并没进入网络中) 涉及数据: socket所涉及的数据是报文,是明文. 作用: 建立长久链接,供网络上的两个 ...

  7. Socket，Tcp，Http的关联

    下面的图表试图显示不同的TCP/IP和其他的协议在最初OSI模型中的位置: TCP/IP 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议 ...

  8. python基础(25):面向对象三大特性二(多态、封装)

    1. 多态 1.1 什么是多态 多态指的是一类事物有多种形态. 动物有多种形态:人,狗,猪. import abc class Animal(metaclass=abc.ABCMeta): #同一类事 ...

  9. Dynamics CRM 2015/2016新特性之三十二：新增乐观并发处理

    关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复215或者20160328可方便获取本文,同时可以在第一间得到我发布的最新的博文信息,follow me!我的网站是 www.luoyong. ...

  10. Wireshark使用教程：不同报文颜色的含义

    - 设置 色彩规则有两个入口,一个在报文上方的工具栏内,如图: 那个鲜艳的图标就是色彩规则的入口. 另一个是view-->coloring rules菜单. 点击进去即可看见所有的色彩规则的设置 ...