vue.js在标签属性中插入变量参数的方法


Posted in Javascript onMarch 06, 2018

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

vue.js在标签属性中插入变量参数的方法

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

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

<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="#" rel="external nofollow" ></a>
                </div>
              </li>
    </ul>

总结

以上所述是小编给大家介绍的vue.js在标签属性中插入变量参数的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
通过javascript把图片转化为字符画
Oct 24 Javascript
简体中文转换繁体中文(实现代码)
Dec 25 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
vue打包相关细节整理(小结)
Sep 28 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
JS实现鼠标按下拖拽效果
Jul 23 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 #Javascript
解决vue build打包之后首页白屏的问题
Mar 06 #Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 #Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 #Javascript
解决vue打包项目后刷新404的问题
Mar 06 #Javascript
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 #Javascript
vue使用xe-utils函数库的具体方法
Mar 06 #Javascript
You might like
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
2013/11/08 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
2016/01/05 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
微信小程序全选多选效果实现代码解析
2020/01/21 Javascript
vue watch监控对象的简单方法示例
2021/01/07 Vue.js
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python中的集合介绍
2019/01/28 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
鱼油专家:Omegavia
2016/10/10 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
材料化学应届生求职信
2013/10/09 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
未婚证明书模板
2014/10/08 职场文书
公司开会通知
2015/04/20 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
十大最强格斗系宝可梦,超梦X仅排第十,第二最重格斗礼仪
2022/03/18 日漫