vue中实现动态切换不同的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vuev2.5.21.js"></script>
    <style>
        ul{
            width: 200px;
            border: 1px solid red;
        }
        li{
            width: 100px;
            height: 30px;
            border: 1px solid black;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul v-for="(item,index) in list" :key="item.id" ref="ul" :data-index="index">
            <a href="javascript:void(0)" @click="fold(index)">切换</a>
            <li v-if="item.selected">你好 世界</li>
            <li v-else>{{item.name}}</li>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    {
                        id:0,
                        name:"hello world",
                        selected:true,//后台的值
                    },
                    {
                        id:1,
                        name:"hello world",
                        selected:true,//后台的值
                    },
                    {
                        id:2,
                        name:"hello world",
                        selected:true,//后台的值
                    },
                    {
                        id:3,
                        name:"hello world",
                        selected:true,//后台的值
                    }
                ]
            },
            methods:{
                fold(index){
                    for(let i = 0; i<this.list.length;i++){
                        let key = JSON.parse(this.$refs.ul[i].dataset.index);
                        if(key === index){
                            this.list[i].selected =!this.list[i].selected ;
                        }
                    }
                },
            }
        })
    </script>
</body>
</html>

  

原文地址:https://www.cnblogs.com/tuziling/p/10699457.html

时间: 2024-10-04 03:46:56

vue中实现动态切换不同的值的相关文章

vue中如何实时修改输入的值

vue中如何实时修改输入的值 经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想去还是有必要了解一下. 操作方法 一直听说各种方式,记得最深的便是利用computed的计算属性,通过set 和 get 来进行修改,其他的也有所见闻.先实现一种,再进行其他其他深究,以及使用好坏. vue文档说明 对于需要使用输入法 (如中文.日文.韩文等) 的语言,你会发现 v-model 不会

Vue中底部tabBar切换及跳转

tabBar.vue文件,写法如下: <div class="tab"> <div class="tab_item" v-for="(item ,index) in tabBarImg" :key="index" @click="switchToTab(item.path)"> <img :src="$route.path === item.path ? item.i

Vue中解决路由切换,页面不更新的实用方法

前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页面无法更新的问题了. 一.问题呈现 在路由中进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变.并没有更新 二.解决方案① 给<router-view :key="key"></router-view>增加一个不同:key值,这样vue

Android中实现动态切换组件背景的操作

这个也是昨天学习用到的,总结下思路吧,因为这个知识点以后绝对会再次用到. 目的:我要在软件中动态的选择组件背景,系统皮肤,自定义吐司背景等. 实现思路:要用到安卓中的SharedPrefence的功能,在设置里面写一个控件,设置一个点击监听器,点击的时候显示一个Alert选择弹窗,让你进行选择,对这个弹窗再设置一个点击监听器(onItemListener),点击到具体某个的时候,把对应的点击id保存到sahredprefence里面去,这样,其他地方就可以从这里取得设置里选择的值,进行动态个性化

problem: vue中获取动态元素高度

前言:始终要相信你能想到的解决方案,基本上都是可以用技术实现的... 解决方法就是在mounted中在this.$nextTick()去获取,如果没有获取到,不是写法错就是,元素没有绑定对地方,注意检查自己的逻辑,自己在写什么思路一定要清晰. 有这样一个需求: 实现一个表格,每一行代表课程的一期,每一期的天数不固定,每一期有安排老师的要显示老师的数据,也就是要显示一个白条来展示数据,白条的宽度可以根据后端给的开始时间和结束时间来计算间隔数从而算出宽度,而白条高度需要根据内容来自适应,左侧的期数栏

每天一点点之vue框架开发 - vue中使用vue-router切换页面时自动滚动到顶部的方法

1. 在main.js入口文件中写入 //路由跳转后,页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } 位置如下: 2. 还可以在实例router对象的时候设置 export default new Router({ mode: 'hash', // base: '/dist/', scrollBehavior: () => ({ y: 0

vue初学备份(动态切换class类)

<div id="app"> <div v-bind:class="[ isActive ? 'active':'']" @click="clickActive"></div> {{isActive}} <div v-for = "(item,index) in actvieArray"> <p v-bind:class = "[isActive&&

vue中如何动态添加readonly属性

动态绑定input的readonly属性 1 <inpu :readonly="status ? false : 'readonly'"> status 为 false时添加 readonly 属性,只读,false不要加引号! 原文地址:https://www.cnblogs.com/gopark/p/11172967.html

vue中img的src动态渲染不显示问题

在vue中写动态展示图标的需求时,遇到个小坑: 需求:(根据权限动态展示图标,如果没有显式默认图标) 错误写法1: 错误写法2: 报错:(实际img文件夹是有这些图片的,没找到) 审查元素发现:(图片并没有被打包,显示引入路径) 解决办法: 方法一: 使用require引入图片: 方法二: 使用img的onerror属性: 审查元素已经被成功打包转为base64: 原文地址:https://www.cnblogs.com/zixuan00/p/12598953.html