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加载,否则会当成字符串来处理. 效果:
随机推荐
- 2-4、配置Filebeat使用logstash
配置filebeat使用logstash 重要:要将事件发送到Logstash,还需要创建一个Logstash配置管道,该管道监听传入的Beats连接并将收到的事件编入索引到Elasticsearch ...
- Fiddler对Android应用进行抓包
一:面对安卓包的时候进行分析问题 首先下载fiddler工具进行安装. 使用:第一步:启动Fiddler,打开菜单栏中的 Tools > Fiddler Options,打开“Fiddler O ...
- 指定的 CGI 应用程序遇到错误，服务器终止了该进程。
遇到这种错误只需要把这个项目的Cookies删除再重新启动就行了
- mysql更新字段内容
update article set a_content = REPLACE(`a_content`,'www.abc.com','www.bcd.com')
- Hbase API 简单封装
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- 解决用SHA256算法做私钥签名时，遇到“指定的算法无效”的问题
在上一篇随笔“记一次三方接口开发的数据加密方案”中,使用SHA256对数据进行签名时,我提到了一个异常,System.Security.Cryptography.CryptographicExcept ...
- 黑洞版视频裂变程序【接口版】全新上线，全新UI，支持分享数据统计
黑洞版视频裂变程序[接口版]全新上线,全新UI,支持分享数据统计! 后台效果 程序统一售价:1899/套(包安装,包更新) 注:本程序不属于之前视频程序的更新版,展现形式和广告位设置均不同,是 ...
- Big big world
Big big world I'm a big big girl 我是个大女孩 in a big big world 在这个大大的世界上 It's not a big big thing if you ...
- C++入门笔记（二）变量和基本类型
变量和基本类型 一.基本内置类型 1.除去布尔类型和扩展的字符型外,其他整型可以分为带符号的和无符号的. 2.与其他整型不同,字符型被分为了三种:char.signed char 和 unsigned ...
- webstorm2018.2.3激活
一,简介 WebStorm 是jetbrains公司旗下一款JavaScript 开发工具.目前已经被广大中国JS开发者誉为"Web前端开发神器"."最强大的HTML5编 ...