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加载,否则会当成字符串来处理. 效果:
随机推荐
- 《剑指offer》二叉树的深度
本题来自<剑指offer> 反转链表 题目: 思路: C++ Code: Python Code: 总结:
- ssh-copy-id使用非默认22端口时
http://blog.sina.com.cn/s/blog_541a3cf10101epzf.html
- android---EditText的多行输入框
<EditText android:id="@+id/edt_order_note_text" android:layout_width="match_parent ...
- java文件过滤器的使用
前言: java.io.FileFilter(过滤器接口)boolean accept(File pathname) File类提供了如下方法使用过滤器:public File[] listFiles ...
- VS2017打包注册IE插件及修改IE安全选项设置
前言 最近项目需要在浏览器环境下读取员工身份证信息,要实现网页与硬件设备通信,考虑了几种实现方式: 1.借助ActiveX插件,通过程序库直接与设备通信. 优点:厂家提供了IE插件,开发简单 缺点:只 ...
- 咸鱼入门到放弃11--Servlet+JSP+JavaBean开发模式
本篇搬运了大佬blog:https://www.cnblogs.com/xdp-gacl/p/3902537.html 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servle ...
- sqlserver 删除表结构
sqlserver-----------删除表结构use IndividualTaxGOdeclare @sql varchar(8000)while (select count(*) from sy ...
- jmeter主要函数助手功用说明
jmeter中虽然有很多的插件,但是有些需要安装,有些具有一定的局限性.函数助手是一个快捷的工具库.下面记录一下函数助手中一些主要的函数的使用方法. 注:不内容中所有的实例均基于3.2记录 1._Be ...
- 解释器、环境变量、如何运行python程序、变量先定义后引用
python解释器的介绍.解释器的安装.环境变量的添加为什么加环境变量.如何调取不同的解释器版本实现多版本共存.python程序如何运行的.python的变量定义 一.python解释器: 用来翻译语 ...
- Windows远程桌面相关
3389端口是Windows系统远程终端服务以及系统远程桌面服务默认所使用的端口,原本是为了管理人员能够方便的远程维护管理计算机而设计的,但如今已经成为了黑客们最喜爱的一种人侵途径,入侵者通过3389 ...