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 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
JavaScript中自定义事件用法分析
Dec 23 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
Nov 17 Javascript
jquery基础知识第一讲之认识jquery
Mar 17 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
JS封装通过className获取元素的函数示例
Dec 20 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
解决vue移动端适配问题
Dec 12 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
基于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
PHP之数组学习
2011/05/29 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
CI框架的安全性分析
2016/05/18 PHP
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
2017/02/24 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP如何解决微信文章图片防盗链
2020/12/09 PHP
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
JQuery中操作Css样式的方法
2014/02/12 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
python中利用zfill方法自动给数字前面补0
2018/04/10 Python
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python 获取毫秒数,计算调用时长的方法
2019/02/20 Python
python文字转语音实现过程解析
2019/11/12 Python
Python实现自动装机功能案例分析
2020/10/22 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
给同学的道歉信
2014/01/16 职场文书
学生自我评价范文
2014/02/02 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
初一数学教学反思
2016/02/17 职场文书