Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >vue.js如何在标签属性中插入变量参数

vue.js如何在标签属性中插入变量参数

作者头像
hbbliyong
发布于 2018-03-29 05:06:49
发布于 2018-03-29 05:06:49
9.2K00
代码可运行
举报
文章被收录于专栏:hbbliyonghbbliyong
运行总次数:0
代码可运行

html的标签的属性,比如id、class、href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法:

v-bind:属性=“ ‘字符串’+自定义变量名”,自己试了没问题,有需要的朋友可以借鉴下!

最后需要注意一下属性一定是":属性="这种形式才会起作用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <ul class="menu" v-for="(item,index) in 4">
                            <li :class="{'selected':index===clickIndex}" @click="selected(index)">
                                <div>
                                    <h3>{{item}}点位标签</h3>
                                    <span style="margin: 15px 0px;">附近的资产:3(2个未完成修订)</span><br />
                                    <img :src="'img/'+(item+nameIndex)+'.jpg'" />
                                    <a href="#"></a>
                                </div>
                            </li>
       </ul>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue零基础到高阶第二节☀️
注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值。
苏州程序大白
2022/04/13
5.1K0
Vue零基础到高阶第二节☀️
Vue.js 系列教程 2:组件,Props,Slots
原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分。在这一部分,我们将学习组件
叙帝利
2018/01/17
1.6K0
Vue.js 系列教程 2:组件,Props,Slots
vue-学习笔记(更新中...)
vue学习笔记  Vue实例: 1 var vm = new Vue({ 2 // 选项 3 }) 实例化Vue、Vue实例,构造函数Vue、创建一个Vue的根实例,Vue实例气筒Vue,js应用
xing.org1^
2018/05/17
2.1K0
一、Vue.js 概述
在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!
Daotin
2022/11/28
1.1K0
一、Vue.js 概述
Vue模板语法
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如图所示。
清出于兰
2022/01/05
2K0
Vue模板语法
Vue创建项目及基本语法 一
​ 本文档仅作为个人学习笔记、详细内容可以查看官网文档,官方文档有更详细的使用说明及案例
梅花
2020/09/28
1.3K0
第一章 : Vue2 技术精讲
① 对象 → 键就是类名,值是布尔值。如果值为 true,有这个类,否则没有这个类
捞月亮的小北
2023/12/01
2310
第一章 : Vue2 技术精讲
【Vue】day02-Vue基础入门
所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码
陶然同学
2023/10/14
2720
【Vue】day02-Vue基础入门
Vue-QuickStarted
概念:指令(Directives)是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
用户11097514
2024/05/31
1530
Vue-QuickStarted
一篇文章带你了解网页框架——Vue简单入门
如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助
秋落雨微凉
2022/10/25
1K0
一篇文章带你了解网页框架——Vue简单入门
浅谈Vue--直接引入Vue.js实现简单地开发
Vue是一个MVVM的JavaScript框架; ViewModel负责逻辑的实现,把Model里的数据传递给View,实现视图层与数据层的解耦
生南星
2019/07/22
7.8K0
Vue模板语法
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如下图所示。
梨涡浅笑
2022/05/08
2K0
Vue模板语法
【一起来烧脑】一步学会Vue.js系统
Vuejs是一个构建数据驱动的web界面的库,通过api实现响应的数据绑定和组合的视图组件,Vue.js的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单,一旦创建了绑定,DOM 将与数据保持同步。
达达前端
2019/07/18
1.3K0
【一起来烧脑】一步学会Vue.js系统
vue快速入门的三个小实例
用vue做项目也有一段时间了,之前也是写过关于vue和webpack构建项目的相关文章,大家有兴趣可以去看下webpack+vue项目实战(一,搭建运行环境和相关配置)(这个系列一共有5篇文章,这是第一篇,其它几篇文章链接就不贴了)。但是关于vue入门基础的文章,我还没有写过,那么今天就写vue入门的三个小实例,这三个小实例是我刚接触vue的时候的练手作品,难度从很简单到简单,都是入门级的。希望能帮到大家更好的学习和了解vue,也是让自己能够复习一下vue。如果发现文章写得有什么不好,写错了,或者有什么建议!欢迎大家指点迷津!
守候i
2018/08/22
1.4K0
vue快速入门的三个小实例
Vue模板语法
基本上就是将数据以字符串的方式拼接到HTML标 签中,前端代码风格大体上如下所示。
星辰_大海
2022/05/10
6.8K0
Vue模板语法
前端之Vue.js库的使用
Vue.js是前端三大新框架:Angular.js、React.js、Vue.js之一,Vue.js目前的使用和关注程度在三大框架中稍微胜出,并且它的热度还在递增。
汪凡
2019/03/01
5.3K0
前端之Vue.js库的使用
vue—你必须知道的
不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文,所以 this 不会按照预期指向 Vue 实例,然后 this.myMethod 将是未定义。
超然
2018/08/03
2K0
Vue基础
注意:使用v-text时,会将标签内部的内容覆盖并且替换成对应的内容,若不希望内容被覆盖,则不可使用v-text的写法,两种写法都支持表达式,如:v-text="message + ‘!’",{{ message + “!” }}。
Cikian.
2022/09/22
2.7K0
Vue基础
全栈工程师开发实战之从入门到技术实战之02--vue指令
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6kqd13Tt-1654938578648)(assets/image-20220202161926801.png)]
张哥编程
2024/12/13
2020
全栈工程师开发实战之从入门到技术实战之02--vue指令
Vue图片轮播组件实例代码
这部分很简单吧,常规的显示图片及轮播数字下标。CSS按照自己喜欢的样式随便调整。(最后面会给出我写的完整的CSS样式)
PHP开发工程师
2021/04/17
4.7K0
Vue图片轮播组件实例代码
相关推荐
Vue零基础到高阶第二节☀️
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验