vue.js关于动态绑定数据

最新推荐文章于 2024-08-23 15:35:36 发布
最新推荐文章于 2024-08-23 15:35:36 发布
阅读量2w 收藏 3
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leaves_story/article/details/80006908
版权

最近在写vue的时候发现一个问题。

在后台传过来的一个数组需要给页面进行渲染。


需要为每个<li>标签吧绑定一个点击事件，这个点击事件需要取这个<li>标签的name属性的值，然后再进行页面的跳转,如何给name赋值呢，刚开始如上图写的，{{template.voteId}},发现是错误的，{{}}是用在文本插值的，绑定属性不能这么写，需要使用v-bind命令


这样审查元素后发现已经能够正常绑定了，li标签的name属性也被赋值了。点击事件也绑好了



但在获取name的值时无法获取到


this对象未定义，后来发现这个方法是定义在vue中的，vue里面获取当前点击事件的对象不是this，而应该用传入$event，在方法里用event.currentTarget获取当前对象；


但根据当前对象使用.name获取值发现无法取到。。name=undefined,很奇怪，有待研究

最后通过这样处理解决



li里面多加了一个div，把值赋给了div，通过li拿到div的值

leaves_story
关注
vue 动态样式绑定
Simon的博客
07-28 2550
方式一：属性绑定 1. 原始样式 <template> <div id="app"> <h1>示例1 属性绑定</h1> <div class="myStyle">测试</div> </div> </template> <script> export default { name: "app", }; </script> <style> .myS
了解vue动态绑定
尔东尘的博客
07-02 2369
1.动态绑定class2.动态绑定style接下来我们先了解一下怎么动态的设置class首先，动态的设置class是什么意思呢打个比方：先埋伏好两个类一个是.a{}一个是.b{}，到时候我要改样式，我就把a改成b，这个动作就相对于动态修改属性的值，类似于v-bind简写为“：”语法：格式1：格式2：如果布尔值为true，就添加对应的类名说明：可以和静态class共存示例代码 二、动态绑定style 动态绑定s...
动态绑定属性
qq_33879627的博客
09-21 3300
（四）动态绑定属性 4.1 v-bind的基本使用 ​ 某些时候我们并不想将变量放在标签内容中，像这样<h2>{{message}}</h2>是将变量h2标签括起来，类似js的innerHTML。但是我们期望将变量imgURL写在如下位置，想这样<img src="imgURL" alt="">导入图片是希望动态获取图片的链接，此时的imgURL并非变量而是字符串imgURL，如果要将其生效为变量，需要使用到一个标签v-bind:，像这样<img v-bind:sr
Vue3 样式动态绑定
最新发布
qq_38210427的博客
08-23 835
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。v-bind:class 可以简写为 :class。class 属性绑定。
Vue的动态绑定
weixin_51528263的博客
06-06 489
在 Vue.js 中，冒号:或 v-bind 指令用于动态绑定 HTML 属性，:label和:value前面加上了冒号:，表示这是一个动态绑定的属性。冒号后面的表达式item.label和item.value会被解析为 Vue.js 实例中的 data 数据，当 supplier对象的属性值发生变化时，<el-option>组件的label和value属性也会自动更新。如果不加冒号，则表示这是一个静态属性，显示在前端的就只是“supplier.name”这个字
vue 动态绑定
2401_84093837的博客
04-08 712
console.log(‘界面显示的内容：’ + document.getElementById(‘h3’).innerText)console.log(document.getElementById(‘h3’).innerText) //床前明月光。// 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作。// beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染。// updated执行时，内存中的数据已更新，并且页面已经被渲染。
Vue.JS 基础
weixin_44546855的博客
06-08 330
AngularJS是Vue早期开发的灵感来源。然而，AngularJS 中存在的许多问题，在 Vue 中已经得到解决。 [8] Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。 Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 [] 。 Vue.js
vue.js选中动态绑定的radio的指定项
12-04
上一文，介绍了vue.js动态添加、删除绑定的radio选项，本文介绍如何选中radio的某一项 绑定的数据和上文的model是一致的，选中radio或者checkbox需要注意的是： 不管<input type='radio checked='true''> 你...
vue.js动态数据绑定学习笔记
12-11
Vue.js的动态数据绑定是其核心特性之一，它使得数据模型与视图之间的交互变得简单。在Vue中，数据绑定是双向的，意味着视图的变化会反映到数据模型上，反之亦然。以下是对这一机制的详细解释： 首先，我们要理解四...
vue.js删除动态绑定的radio的指定项
10-19
在Vue.js中，动态绑定是其核心特性之一，允许开发者在视图和模型之间建立实时的数据连接。本篇将详细讲解如何在Vue.js中动态绑定radio（单选按钮）并实现删除指定项的功能。 首先，我们需要了解Vue.js中的`v-for`...
v-bind动态绑定（vue）
xiaolingshi_的博客
09-28 1110
v-bind动态绑定（vue） v-bind分为两种（对对象和对数组） 首先介绍下v-bind对象语法 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</
2-vue-动态绑定属性
qq_41138726的博客
11-11 229
1.v-bind动态绑定class属性的对象语法 点击按钮可以转化颜色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>...
【Day2:Vue动态绑定】
baicaixinhuaile的博客
05-19 367
1.v-bind动态绑定class对象写法： 代码： <style> .active { color: red; } </style> </head> <body> <div id="root"> <!-- 第一种写法； :class=‘{active:isactive}’ --> <!-- <p :class
Vue动态绑定Class与Style
长沙火山
03-17 4923
这样可以根据数据的变化来动态改变元素的样式，实现更灵活的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该添加哪些类，实现更复杂的样式控制。通过数组语法，可以根据多个条件的组合来决定元素应该具有哪些样式，实现更灵活的样式控制。这样，我们可以根据多个条件的组合来动态控制元素的样式，使页面更具交互性和灵活性。数组语法，可以实现更复杂的样式控制，根据多个条件的组合来动态改变元素的样式，满足不同的需求。通过数组语法，可以根据多个条件的组合来动态控制元素的样式，实现更灵活的样式控制。
VUE动态绑定图片
weixin_34344677的博客
04-23 572
BUG： 直接在DOM中使用 img 标签 <img src="../../common/image.png"> 当我们需要动态传入图片路径时： <img :src="bookImg"> data() { bookImg: '../../common/image/book-default.png' } 复制代码这种操作找不到图片 ...
【Vue知识体系总结 2，95%Java开发者已收藏的十大开源库
m0_60666209的博客
08-08 210
IDE使用WebStorm。 四、Vue入门语法 1、使用Vue实现hello world <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app">{{message}}</div&gt..
Vue基础知识总结 2：vue 动态绑定
学Java，找哪吒
07-15 1万+
大家好，我是哪吒，一个热爱技术的年轻人，架构师，是每一个程序员的梦想，因此，作为一个Java后端程序员，突击前端，迫在眉睫，而目前来说，最火的前端框架无疑就是Vue，我们公司前端也都是Vue，每次与前端联调的时候，因为对前端知识的匮乏，总是很无奈，不破不立，我决定花49天时间，系统的学习一下Vue。因为酷爱斗破苍穹，这一系列就按照斗破苍穹中萧炎的成长历程为系列标题吧。
VUE 动态绑定下拉框
热门推荐
05-02 1万+
数据源： vue 实例： 这边的selected：0 是初始值，就是下面一张图dom中v-model 绑定的selected序号。它随着选择的序号不同而不同。 这样就实现了下拉框和span元素中内容的联动，这种办法最简便。 绑定并实现联动： ...
第六节:Vue指令:v-bind动态属性绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
05-10 2298
上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.因为动态属性style的值是一个对象,因此 我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了。动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,但是一旦使用了动态绑定, `style`属性的值将变成JS表达式,
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值