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加载,否则会当成字符串来处理. 效果:
随机推荐
- 马拉车算法——poj3974
https://segmentfault.com/a/1190000008484167?tdsourcetag=s_pctim_aiomsg 讲的超好! manacher算法理解 回文串分为偶回文串和 ...
- docker 从入门到精通
转载请注明出处!!!! 1.Docker 基本指令 下载镜像 docker pull 镜像名称:版本 查看已有镜像 docker images 查看已有容器 docker ps 启动docker do ...
- 2018年冬季寒假作业4--PTA 抓老鼠啊~亏了还是赚了？
1. 实验代码; #include<stdio.h> ; void search(char a,int *p){ if(a=='X'){ ) *p=; ; printf("U&q ...
- scrapy_redis 相关: 多线程更新 score/request.priority
0.背景 使用 scrapy_redis 爬虫, 忘记或错误设置 request.priority(Rule 也可以通过参数 process_request 设置 request.priority), ...
- aliyun install Discourse log
apt update apt install wget wget -qO- https://get.docker.com/ | sh vim /etc/default/docker DOCKER_OP ...
- EXTJS4.2 内存中操作表格数据时，删除表格数据，行号不连续解决
需要重新刷新下表格的view => grid.view.refresh();
- 洛谷p1106 删数问题 题解
传送门 # 4.24一个重要的日子.我人生中第一道7个测试点下载了5个的题目被我发现了,第一次用光下载数据点机会,真心坑点重重. 这题是一道很经典的贪心题目,可能是因为我太蒻了,导致我一直以为最少普及 ...
- pygame学习之打印文本
import pygame from pygame.locals import * white = 255, 255, 255 blue = 0, 0, 200 pygame.init() scree ...
- AddIn 中当前完整文件名的获取
Me.Application.ActiveWorkbook.Name 需要注意的是:只有当前文件已经存档的情况下,才能获得后缀名.
- python-关于字典与列表的一个作业
题目是这样的: 给定一个字典dict1,将其转换成dict2: dict1 = { 'fetal':[{u'key': u'sjzx_sy22_121.201.56.5', u'doc_count': ...