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 prototype属性使用说明
May 13 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
详解Javascript中prototype属性(推荐)
Sep 03 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
bootstrap滚动监控器使用方法解析
Jan 13 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
JavaScript实现电灯开关小案例
Mar 30 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
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
服务器web工具 php环境下
2010/12/29 PHP
解析php中die(),exit(),return的区别
2013/06/20 PHP
解析php中的escape函数
2013/06/29 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
jQuery点击后一组图片左右滑动的实现代码
2012/08/16 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
BootStrap modal模态弹窗使用小结
2016/10/26 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
Python sys.path详细介绍
2013/10/17 Python
Python实现备份文件实例
2014/09/16 Python
Python中的迭代器漫谈
2015/02/03 Python
Python中暂存上传图片的方法
2015/02/18 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
python读取各种文件数据方法解析
2018/12/29 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
全神贯注教学反思
2014/02/03 职场文书
点菜员岗位职责范本
2014/02/14 职场文书
实习协议书范本
2014/04/22 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
团干部培训班心得体会
2016/01/06 职场文书