12.VUE学习之-循环li,if判断示例讲解class中应用表达式

功能:

当点击按键时,改变当前循环数组里的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 v-on: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:function(item,status){

                console.log(item); //item代表传过来循环的当前数组
                console.log(status); //要改变的状态
                item.status=status; //把当前数组里的status重新赋值

            }
        },
        data:{
            news:[
                {title:‘haha‘,status:true},
                {title:‘hehe‘,status:true},
            ],
        },
    });
</script>
</html>

效果:

原文地址:https://www.cnblogs.com/haima/p/10227857.html

时间: 2024-11-06 16:21:32

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

vue学习总结(简单介绍)

声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: 1 <div id="app"> 2 {{ message }} 3 </div> 4 5 var app = new Vue({ 6 el: '#app', //element需要获取的元素 7 data: { 8 message: 'Hello Vue!' 9 } 10 }) 除了文本插值,我们还可以像这样来绑定元素特性: 1 <div id=&quo

Vue学习系列(三)——基本指令

前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的认识到组件在Vue中的核心地位. 而今天,我们将对vue中的基本指令进行了解汇总,指令在Vue中是个很重要的功能,在Vue项目中是必不可少的.根据官网的介绍,指令 (Directives) 是带有 v- 前缀的特殊属性.指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM.

python Django教程 之模板渲染、循环、条件判断、常用的标签、过滤器

python3.5 manage.py runserver python Django教程 之模板渲染.循环.条件判断.常用的标签.过滤器 一.Django模板渲染模板 注: 本节代码是基于 Django 1.8,但 Django 1.4 - Djagno 1.9 操作流程也是一样的. 后文给出示例代码可以在 Django 1.4.x 到 Django 1.9.x 上运行. 不过还是强调一点,一点要动手敲代码!不要偷懒哦,动手才能学到真东西. 1. 创建一个 zqxt_tmpl 项目,和一个 名

C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例

C#开发Unity游戏教程循环遍历做出判断及Unity游戏示例 Unity中循环遍历每个数据,并做出判断 很多时候,游戏在玩家做出判断以后,游戏程序会遍历玩家身上大量的所需数据,然后做出判断,即首先判定玩家是否有权限做出这种选择,然后才决定是否为玩家执行此选择.例如,<仙剑奇侠传>这款游戏,进入剧情"荷叶迷宫时",会要求玩家击碎迷宫里的5尊雕塑,如图5-12所示.但是击碎的前提是,玩家身上必须携带有"锤子".也就是说系统会遍历玩家身上所有的资源,如果有锤

后端开发者的Vue学习之路(二)

目录 上篇内容回顾: 数据绑定 表单输入框绑定 单行文本输入框 多行文本输入框 复选框checkbox 单选框radio 选择框select 数据绑定的修饰符 .lazy .number .trim 样式绑定 class绑定 对象语法: 数组语法: style绑定 对象语法: 数组语法: 补充: 事件 绑定事件 事件修饰符 按键修饰符 事件绑定的简写 补充: Vue指令 数组操作 官网的话 补充: Vue的元素复用问题 数据残留问题 问题的解决: 首发日期:2019-01-20 上篇内容回顾:

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue学习之路---No.2(分享心得,欢迎批评指正)

昨天我们大致了解了有关Vue的基础知识和语法:今天我们继续在大V这条路上前进. 首先,我们回忆一下昨天提到的相关知识点: 1.了解Vue的核心理念------"数据驱动视图" 2.了解Vue的特色功能-------"双向绑定" 3.了解Vue的基础语法-------"{{bigSurprise}},el:'',data{},vm.project,method{},等 首先,昨天我们提到了很好用的双向绑定,但是如果在某些情况下我们不需要双向绑定应该怎么办呢,

Vue学习笔记进阶篇——Render函数

本文为转载,原文:Vue学习笔记进阶篇--Render函数 基础 Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接近编译器. <h1> <a name="hello-world" href="#hello-world"> Hello world! </a> </h1>

20145326蔡馨熠《信息安全系统设计基础》第12周学习总结

20145326蔡馨熠<信息安全系统设计基础>第12周学习总结 教材学习内容总结 第九周学习内容总结 第十周学习内容总结 第十一周学习内容总结 视频学习与实践 指针与声明 C语言中变量的声明包括两个部分: 类型 声明符 对于简单类型,声明并不会对代码产生多大的阅读障碍,而对于复杂类型的识别,可以采用右左右左法进行判断. 指针数组.数组指针.指针函数.函数指针的区别 数组指针(也称行指针) 定义 int (*p)[n]; ()优先级高,首先说明p是一个指针,指向一个整型的一维数组,这个一维数组的