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加载,否则会当成字符串来处理. 效果:
随机推荐
- django orm 及常用参数
一些说明: 表myapp_person的名称是自动生成的,如果你要自定义表名,需要在model的Meta类中指定 db_table 参数,强烈建议使用小写表名,特别是使用MySQL作为后端数据库时. ...
- ueditor内容带格式回显(html字符串回显)
简单描述:项目里有个地方用到啦ueditor,用来输入XX描述就用电影film代替,保存后,获取到ueditor里的内容(html字符串),保存到数据库. 吐槽:回显的时候,无论怎么处置,就是死活不好 ...
- day20包
https://www.cnblogs.com/Eva-J/articles/7292109.html 一.模块: 1.什么是模块:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名 ...
- 完美解决cannot resolve symbol servlet 的报错
1.右键点击项目,打开open module settings 2.选择Libraries 3.选择中间+号,点击java,然后选择tomcat/lib/servlet-api.jar 4.点击app ...
- Django提交表单时遇到403错误：CSRF verification failed
这个问题是由跨站点伪造请求(CRSF)造成的,要彻底的弄懂这个问题就要理解什么是CRSF,以及Django提供的CSRF防护机制是怎么工作的. 什么是CSRF CSRF, Cross Site Req ...
- 星环大数据安全组件Guardian与hadoop自带的安全组件区别
在进行讲解之前,先带大家学习下hadoop关于hdfs自己的安全如何实现的--------------------------- 名词: ACL-访问控制列表(Access Control List, ...
- SSM框架搭建后在tomcat部署报错lineNumber: 15; columnNumber: 59; 必须为元素类型 "beans" 声明属性 "xmlns"
删除applicationContext.xml中的文件头上的这个就可以<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" &q ...
- UOJ#24. 【IOI2014】Rail 交互题
原文链接www.cnblogs.com/zhouzhendong/p/UOJ24.html 题解 我们将 C 型车站称为 左括号 '(', D 型车站称为右括号 ')' ,设括号 i 的位置为 p[i ...
- OI退役
OI退役 by war 其实初中时就想自学编程,但是这个愿望并没有很强烈,加上中考的压力就没有实践.在中考前夕看到的现在的机房,哇,计算机奥赛.但是在机房里的可能是一神和奥神,也许有凯哥. 高一寒假学 ...
- leetcode刷题正则表达式
题目链接:https://leetcode-cn.com/problems/regular-expression-matching/ 这道题用到了动态规划: 关于动态规划请参考这篇博文:https:/ ...