vue通过变量名的字符串形式，获取在data中声明的变量

最新推荐文章于 2024-05-16 19:01:51 发布
最新推荐文章于 2024-05-16 19:01:51 发布
阅读量2.2k 收藏 2
点赞数 2
分类专栏： vue相关 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49886030/article/details/122070028
版权

问题描述：

 在data中声明了多个变量：如（tagEdit :false）。因为变量名后半部分重复，触发点击事件时，只传前缀（如 tagEdit，@click="click('tag')"）

HTML部分：

解决方案：

接收后获取并且改变变量值，`${变量}`是一种字符串拼接的写法

//正常获取时：this.tagEdit = true，拼接字符串获取：this[`${'tag'+"Edit"}`] = true

 实现效果：

通过点击事件控制页面内容显隐，(click方法中，变量为拼接字符串)效果如图

上好佳hhhhh
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue获取data中数组的value值_控制台修改vue组件中data对象里的数组意外失效
weixin_33521678的博客
12-24 2919
摘要：最近在学习Vue.js，其语法很像angularjs。然后在学习过程中遇到一些奇怪的事情，比如这篇提到的：修改data对象里面的数组，有的成功有的意外失效......一、发现最近在看Vue.js，然后发现data对象里面的属性并非都可以通过控制台来更新！按照官方的说法：每个 Vue实例都会代理其 data对象里所有的属性，注意只有这些被代理的属性是响应的......配图一张：然后艺灵就按照此...
servue:服务器端渲染引擎，可将vue文件渲染为html字符串
05-14
可将vue文件渲染为html字符串layouts/parent.vue pages/home.vue 渲染结果设置自定义路径变量自定义HTML正文模板自定义预处理器/语言支持模式主管管理layouts/parent.vue home.vue 从服务器端将数据传递到vue 通过....
使用定义的字符串访问vue中data里的数据
weixin_45635130的博客
03-28 489
假设有个变量isxxxShow:true，现在let p=isxxxShow，想使用this.p访问isxxxShow肯定是不行的，应该使用this[p] 所以： let p=isxxxShow; this.isxxxShow===this[p]; 文章质量提示 文章质量不佳，原因可能为篇幅过短、包含营销性质的广告和二维码或外链过多，建议设置仅我可见，若设置全部可见，推荐可能受影响 文章质量提示 文章质量不佳，原因可能为篇幅过短、包含营销性质的广告和二维码或外链过多，建议设置仅我可见，若设置全部可见，
Vue进阶（贰零幺）变量动态绑定
最新发布
IT全栈 华强工作室
05-16 476
data是Vue实例中的实例属性，表示Vue实例观察的数据对象。Vue实例的数据对象。Vue 会递归地把 data 的property转换为gettersetter，从而让 data 的property能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的key/value对)：浏览器 API创建的原生对象，原型上的property会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。一旦观察过，你就无法在根数据对象上添加响应式property。
在vue的data中取值data
热门推荐
qq_43813351的博客
10-10 1万+
js使用data取值data
Vue data数据拿数据里面的参数
ariutaiaa
02-18 876
在@click里面只需要加上item，可以拿到数据参数 <div v-for="item in data"> <p>{{item.name}}</p> <a @click="bin(data)">这是按钮</a> </div> ...
vue 获取data里的array
csdndd521的博客
04-25 1117
获取data里的array的话；先转json遍历，获取到全部的txarray里的内容后，再次遍历array里的就可以
vue的es6模板字符串使用data数据
Jaunty_Liu的博客
03-03 1553
vue的es6模板字符串使用data数据/uniapp<rich-text>使用的data数据 本人uniapp的<rich-text>使用了模板字符串但是需要读取data的数据 有的时候想使用字符串直接读取映射到界面但是data数据无法使用，可以参考 <script> export default{ data(){ // 在这里设置变量之后再return的话另外一个变量就可以使用字符串变量了 var pol
vue中如何实现变量和字符串拼接
01-19
整理文档，搜刮出一个vue中如何实现变量和字符串拼接的代码，稍微整理精简一下做下分享。 在data中定义变量： data() { return { a: 'A' } } 如何通过按钮点击实现字符串和变量a的拼接呢？ <button @click='...
vue data变量相互赋值后被实时同步的解决步骤
11-19
数据结构是这样子的 data() { return { title: 'web前端 this data变量相互赋值后被实时...我们在通过JavaScript把 “val_1” 转换成字符串类型，再JSON.parse，最后再赋给 “val_2” 就解决了 onload() { this
vue data对象重新赋值无效(未更改)的解决方式
10-15
在Vue.js中，数据绑定是基于数据响应式的，这意味着当你修改`data`对象中的属性时，Vue会自动追踪这些变化并更新对应的视图。然而，当你尝试直接赋值给一个对象属性，Vue可能无法检测到这个变化，导致视图没有更新。...
vue中用变量获取data中定义的数据
coldriversnow的专栏
12-18 3274
vue中用变量获取data中定义的数据 记录如下： data() { return { xiala_1: [], xiala_2: [], xiala_3: [], xiala_4: [], xiala_5: [], xiala_6: [], }; }, huqudata(vale,wz){
Vue 中常用函数变量介绍
REID丶Beginner的博客
08-25 1218
对于很少写前端的朋友来说，偶尔需要写一些前端代码的时候，查资料又费时间，开别人写的代码又没注释，这时就不知所措很难下手。 以下图片内容就是在前端开发过程中经常使用到的变量属性： 1、name：非必选项，我们可以理解为给该文件或页面签个名，在其它文件或页面需要用到的时候直接可以通过该 name 引入，看起来好像没啥用处，但是实际上这里用处还挺多的（具体作用自行百度一下）。 2、props：(或 properties )是我们将数据从父组件向下传递到其子组件的方式，也就是说有继承关系的页面是可以直接.
vue在样式中使用data中的变量
weixin_43550562的博客
04-23 1278
<template> <div class="box" :style="styleVar"> </div> </template> <script> export default { props: { height: { type: Number, default: 54, }, }, computed: { styleVar() { return {
Vue基础知识
qq_47433906的博客
01-21 2083
Vue基础知识
【vue】this指向的问题，函数中获取不到data定义的变量
weixin_41747256的博客
12-29 769
ps：如果对象函数是箭头函数得话，那this会指向父级作用域。所以还可以有一种写法可以解决这个问题，比中间变量好。所以在函数的内部并没有声明hisDataList，this.hisDataList就会报错。对于vue的this指向问题，一直都是学了忘，忘了学。forEach函数里面获取不到data里面定义的变量。此时虽然可以根据报错解决问题，但是对于本质一知半解。查了些资料，这个的知识点应该是。今天完全是讨论记录贴。
vue中通过变量名的字符串，来获取变量并使用
u013595395的博客
11-05 1万+
如，有一变量isshow，通过this[`${"isshow"}`]可以获取到变量。 例，原：this.isshow = false ，现：this[`${"isshow"}`] = false 。 switch1(param) { this[`${param}`] = !this[`${param}`]; } <!DOCTYPE html> <ht...
vue 变量名的字符串获取变量
小米粒的博客
07-17 3613
需求： vue项目中存在变量option1和option2；通过option+'num'的形式进行读取变量的内容 第一步：定义方法： changeOPtions(num){ let NumB = Number(num)+1; let option="option"+NumB; return option; }, //通过此方法拼接变量名称得到字符串 第二步方法： let cc = this.changeOPtions(echartType);..
vue组件传参
dachuichaobang的博客
03-30 306
组件通信-1：父传子 父组件是通过props属性给子组件通信的 1 . 父组件parent.vue代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰--> </div> </template> <scr
vue2 字符串和变量拼接
05-01
Vue2 中字符串和变量的拼接可以通过模板字符串和插值表达式来实现。 模板字符串使用反引号(``)包裹字符串，可以在其中使用 ${} 的方式插入变量，如下所示： ``` let message = "hello"; let name = "vue"; let str = `this is ${message} from ${name}`; console.log(str); // this is hello from vue ``` 插值表达式使用{{}}包裹变量，可以直接在HTML标签内使用，也可以在vue实例的 data 中进行绑定，如下所示： ``` <template> <div> <p>{{ message }}</p> <p>{{ name }}</p> <p>{{ message + " " + name }}</p> </div> </template> <script> export default { data() { return { message: "hello", name: "vue", }; }, }; </script> ``` 以上就是Vue2中字符串和变量拼接的两种常用方式。需要注意的是，在使用插值表达式时，必须将变量绑定在 Vue 实例的 data 中才能正确显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值