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>
vue中实现动态切换不同的值的更多相关文章
- vue中如何实时修改输入的值
vue中如何实时修改输入的值 经常看到需要对用户输入的值进行实时修改,有时是需要修改为指定的展示内容,有时候是用来校验,禁止用户输入非法数据,总之是一个常见的需求吧,只是自己一直没有特意去关注.思来想 ...
- 如何在vue中修改动态标签中的样式和修改组件库样式
vue中修改动态标签中的样式和修改组件库样式 因为vue中的标签在渲染的时候,都会给标签加上id 所以你想在<style lang="scss" scoped>直接修改 ...
- Vue中的循环以及修改差值表达式
0828自我总结 一.Vue中的循环 v-for 常见的4总情况 #第一种 <div v-for="item in items"></div> #第二种 & ...
- 在vue中如何动态修改title标签的值
建议用vue-wechat-title插件为微信动态设置标题 1,首先安装插件 cnpm install vue-wechat-title --save 2,在main.js中引入 Vue.use(r ...
- Vue中解决路由切换，页面不更新的实用方法
前言:vue-router的切换不同于传统的页面的切换.路由之间的切换,其实就是组件之间的切换,不是真正的页面切换.这也会导致一个问题,就是引用相同组件的时候,会导致该组件无法更新,也就是我们口中的页 ...
- vue中怎么动态生成form表单
form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成组件.支持3个UI框架,并且支持生成任何 Vue 组件.内置20种常用表单组件和自定义组件,再复杂 ...
- 为TextView设置两种状态，程序中可以动态切换
经常会需要用文字的两种状态来表示当前系统的某两种状态.比如: 这里的第一个TextView和后两个TextView就表示了两种状态.我们可以在程序的动态的切换状态(而不是直接修改颜色) ...
- Vue中data返回对象和返回值的区别
速记:粗浅的理解是,事件的结果是影响单个组件还是多个组件.因为大部分组件是要共享的,但他们的data是私有的,所以每个组件都要return一个新的data对象 返回对象的时候 <!DOCTYPE ...
- vue中如何动态的绑定图片，vue中通过data返回图片路径
在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. 效果:
随机推荐
- YARN配置
环境搭建 mapred-site.xml <configuration> <property> <name>mapreduce.framework.name< ...
- 如何在MySQL中设置主从复制
mysql主从同步定义 主从同步机制 配置主从同步 配置主服务器 配置从服务器 使用主从同步来备份 使用mysqldump来备份 备份原始文件 主从同步的小技巧 排错 Slave_IO_Running ...
- 简单测试Elasticsearch 7.0
发现不同的地方 1.创建index (注意:7.0版本之前mappings中需要增加_doc,7.0版之后已去掉) PUT http://10.10.x.x:9200/test 2.Elastics ...
- Docker 学习4 Docker容器虚拟化网络概述
一.docker 虚拟化网络概述 1.OVS: OpenVSwitch,不仅能模拟二层网络,还能模拟三层网络,或者VLAN,VXLAN,流控 SDN软件定义网络技术等. 2.overlay netwo ...
- Mysql之SQL经验基础积累
1.根据create_time排序,如何确保null值的排在最前面: 解决办法: ,), a.create_time DESC 结果如下图:
- 微信小程序1
本次项目主要了解及使用微信小程序,以及更好的理解微信动画,wxss,JavaScript,ajax,xml等技术: 借助的平台是java后端设计语言以及微信小程序界面,设计 该系统分为1,个人用户端: ...
- 计蒜客 等边三角形 dfs
题目: https://www.jisuanke.com/course/2291/182238 思路: 1.dfs(int a,int b,int c,int index)//a,b,c三条边的边长, ...
- Date动态获取时间
·getDate | 根据本地时间获取当前日期(本月的几号) ·getDay | 根据本地时间获取今天是星期几(0-Sunday,1-Monday.. ...
- Dancing Links 学习笔记
Dancing Links 本周的AI引论作业布置了一道数独 加了奇怪剪枝仍然TLE的Candy?不得不去学了dlx dlxnb! Exact cover 设全集X,X的若干子集的集合为S.精确覆盖是 ...
- CentOS7安装及简单配置（一）
CentOS7是RHEL的社区版,摘抄维基百科的一段话如下: CentOS(Community Enterprise Operating System)是Linux发行版之一,它是来自于Red Hat ...