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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
js实现文字截断功能
Sep 14 Javascript
JavaScript拖动层Div代码
Mar 01 Javascript
Angular中的interceptors拦截器
Jun 25 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
JavaScript创建对象方法实例小结
Sep 03 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
Vue实现图书管理小案例
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
PHP内存缓存Memcached类实例
2014/12/08 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
PHP使用POP3读取邮箱接收邮件的示例代码
2020/07/08 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
Python 错误和异常小结
2013/10/09 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
详解Python核心对象类型字符串
2018/02/11 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
谈谈python垃圾回收机制
2020/09/27 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
西雅图的买手店:Totokaelo
2019/10/19 全球购物
工商管理系学生的自我评价分享
2013/11/29 职场文书
投标单位介绍信
2014/01/09 职场文书
教师师德反思材料
2014/02/15 职场文书
个人整改措施书面材料
2014/10/24 职场文书
经典导游欢迎词
2015/01/26 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server