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 相关文章推荐
40款非常有用的 jQuery 插件推荐(系列一)
Dec 21 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
Aug 05 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
基于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错误、异常处理机制(补充)
2012/05/07 PHP
解析php中如何直接执行SHELL
2013/06/28 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
Javascript的一种模块模式
2008/03/22 Javascript
简单的js分页脚本
2009/05/21 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
2012/06/18 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python计算最小优先级队列代码分享
2013/12/18 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python中return语句用法实例分析
2015/08/04 Python
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
详解python uiautomator2 watcher的使用方法
2019/09/09 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
光声世纪笔试题目
2012/08/25 面试题
《理想的风筝》教学反思
2014/04/11 职场文书
在校证明模板
2015/06/17 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技