vue中v-for循环给标签属性赋值的方法


Posted in Javascript onOctober 18, 2018

1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind

<html>
<head>
<meta charset="utf-8">
<title>v-for在线测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
</script></head><body><div id="app"> 
<ul> 
<template v-for="site in sites"> 
<button v-bind:class="site.icon" v-bind:icon:"site.icon">
{{
site.icon
}}
</button> 
</template> 
</ul>
</div>
<script>
new Vue
({ 
el: '#app', data: 
{ 
sites: [  
{ 
icon: 'el-icon-search' 
},  
{ icon: 'el-icon-refresh'
},  
{ 
icon: 'el-icon-download'
} 
] 
}})
</script>
</body>
</html>

总结:

如果直接这么写
<button class="site.icon" icon="site.icon">
{{site.icon}}
</button>或者<button class="{{site.icon}}" 
icon="{{site.icon
}}">{{site.icon}}
</button>,会发现class以及icon的值就是字符串site.icon,只有在标签属性前加上v-bind,即改成<button v-bind:class="site.icon" v-bind:icon="site.icon">{{site.icon}}</button>,class与icon的值才会显示el-icon-search,el-icon-refresh, el-icon-download 。
{{}}
应该写在html文本之间,不能写在属性值里。

总结

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

Javascript 相关文章推荐
JavaScript中实现块作用域的方法
Apr 01 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
javascript动画浅析
Aug 30 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
Node.js事件驱动
Jun 18 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
JavaScript模块模式实例详解
Oct 25 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
webstorm+vue初始化项目的方法
Oct 18 #Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 #Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 #Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 #Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 #Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 #Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 #Javascript
You might like
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
JS常用加密编码与算法实例总结
2016/12/22 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[43:58]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第一场 1月8日
2021/03/11 DOTA
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python获取任意xml节点值的方法
2015/05/05 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
Python 占位符的使用方法详解
2019/07/10 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
基于Python正确读取资源文件
2020/09/14 Python
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
开业庆典答谢词
2014/01/18 职场文书
安全承诺书范文
2014/03/26 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
新年祝酒词大全
2015/08/11 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server
python 通过使用Yolact训练数据集
2021/04/06 Python
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
python全面解析接口返回数据
2022/02/12 Python
Apache Pulsar结合Hudi构建Lakehouse方案分析
2022/03/31 Servers