功能:

当点击按键时,改变当前循环数组里的status里的值,

判断staus里的当前的值来,切换显示 删除 和 恢复 的按钮

判断staus里的当前的值来改变span标签里的字体颜色样式

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue</title>

    <link rel="stylesheet" href="">

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->

    <style type="text/css">

        .success{

            color: green;

        }

        .error{

            color:red;

        }

    </style>

</head>

<body>

<div id="vue">

    <!--循环app里的news-->

    <li v-for="v in news">

        <!--当前数组v里的status为ture是就用sucess样式,否则用error里的样式-->

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

        <!--点击时把当着数组传给changeStatus方法,并把要改变的值也传去,让其在方法里改变当前数组里的值-->

        <button @click="changeStatus(v,false)" v-if="v.status">删除</button> <!--判断有status时才显示按钮-->

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

    </li>

</div>

</body>

<script type="text/javascript">

    var app=new Vue({

        el:'#vue',

        methods:{

            changeStatus(item,status){

                console.log(item); //item代表传过来循环的当前数组

                console.log(status); //要改变的状态

                item.status=status; //把当前数组里的status重新赋值

            }

        },

        data:{

            news:[

                {title:'haha',status:true},

                {title:'hehe',status:false},

            ],

        },

    });

</script>

</html>

效果:

12.1.VUE学习之-循环li,if判断示例讲解class中应用表达式的更多相关文章

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

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

  2. 12.2 VUE学习之-if判断,实践加减input里的值

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  3. vue学习8-for循环

    <!DOCTYPE html> <html lang='en'> <head>  <meta charset='UTF-8'>  <meta ht ...

  4. Vue学习之--------组件嵌套以及VueComponent的讲解（代码实现）（2022/7/23）

    欢迎加入刚建立的社区:http://t.csdn.cn/Q52km 加入社区的好处: 1.专栏更加明确.便于学习 2.覆盖的知识点更多.便于发散学习 3.大家共同学习进步 3.不定时的发现金红包(不多 ...

  5. Vue学习笔记-组件通信-父传子（props中的驼峰标识）

    在组件中,使用选项props来声明需要从父级接收到的数据.props的值有两种方式:方式一:字符串数组,数组中的字符串就是传递时的名称.方式二:对象,对象可以设置传递时的类型,也可以设置默认值等. & ...

  6. Vue学习-01

    1.vue 学习 v-bind:title 数据绑定 v-if 判断显示或者隐藏 <div id="app-3"> <p v-if="seen" ...

  7. vue学习笔记(四)事件处理器

    前言 在上一章vue学习笔记(三)class和style绑定的内容中,我们学习了如何在vue中绑定class和style,介绍了常用的绑定方法,class的数组绑定和对象绑定以及style的数组绑定和 ...

  8. legend2---开发日志12（vue如何进一步学习）

    legend2---开发日志12(vue如何进一步学习) 一.总结 一句话总结:还是得找教程(比如视频),自己摸索太浪费时间,也容易踩坑和抓不住重点 还是得找教程(比如视频),自己摸索太浪费时间,也容 ...

  9. 后端开发者的Vue学习之路（一）

    目录 前言: iview组件库示例 element组件库示例 Vue的介绍 兼容性: 学习Vue需要的前置知识: MVVM模型 补充: 安装/导入 导入Vue 安装 两种方式的区别: HelloWor ...

随机推荐

  1. Java匹马行天下之JavaWeb核心技术——JSP

    JSP动态网页技术 一.JavaWeb简介 一.什么是JavaWeb? JavaWeb是用Java技术来解决相关web互联网领域的技术总称. 需要在特定的web服务器上运行,分为web服务器和web客 ...

  2. Access 将SQL查询结果强制转换为某种类型

    每个函数都可以强制将一个表达式转换成某种特定数据类型. 语法 CBool(expression) CByte(expression) CCur(expression) CDate(expression ...

  3. 【Java密码学】用Java数字签名提供XML安全

    简介 众所周知,XML在产品和项目开发中起着非常重要的作用.通过XML文档可以获取很多信息,还可以使用XML文件进行CRUD(增加.查询.更新和删除)操作.然而值得注意的是,我们如何确保XML中的数据 ...

  4. 【C#】C#委托使用详解（Delegates）

    摘要 委托是C#编程一个非常重要的概念,也是一个难点.本文将系统详细讲解委托. 1. 委托是什么? 其实,我一直思考如何讲解委托,才能把委托说得更透彻.说实话,每个人都委托都有不同的见解,因为看问题的 ...

  5. VMware下linux与window文件夹共享

    这里说的是在虚拟机下来实现在windows下共享一个文件夹. 下面来说明一下是如何实现的: 1．  安装VMware.Workstation. 2．  安装Redhat Linux 9.0,在虚拟机下 ...

  6. 《C#高效编程》读书笔记04-使用Conditional特性而不是#if条件编译

    #if/#endif语句常用来基于同一份源代码生成不同的编译结果,其中最常见的就是debug版和release版.但是这在实际应用中并不是非常友好,因为它们容易被滥用,其代码也难以理解或调试. C#为 ...

  7. 深入理解jvm jdk1,7（1）

    java 虚拟机管理的内存模型包含以下几个运行时数据区域: 程序计数器: 程序计数器是一块较小的内存空间,它可以看成当前线程执行的字节码的行号指示器.在虚拟机的概念模型里(仅是概念模型,各种虚拟机可能 ...

  8. Browser Window

    Window 对象 Window对象表示浏览器中打开的窗口. 如果文档包含框架(iframe或iframe标签),浏览器会被html文档创建一个window对象,并为每个框架创建一个额外的window ...

  9. 报错：Program bash is not found in PATH

    (如果按照我的方法来的话是没有这个错误的,我之前用别的方法的时候有但是后来还是没解决,写出来放到这里做参考吧) 参考原文:http://blog.csdn.net/fuyongbing1986/art ...

  10. uvm_regex——DPI在UVM中的实现（三）

    UVM的正则表达是在uvm_regex.cc 和uvm_regex.svh 中实现的,uvm_regex.svh实现UVM的正则表达式的源代码如下: `ifndef UVM_REGEX_NO_DPI ...