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 相关文章推荐
用于table内容排序
Jul 21 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
浅谈node模块与npm包管理工具
Jan 03 Javascript
vue中如何使用ztree
Feb 06 Javascript
npm全局模块卸载及默认安装目录修改方法
May 15 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
JavaScript动态生成表格的示例
Nov 02 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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
如何直接访问php实例对象中的private属性详解
2017/10/12 PHP
Laravel实现批量更新多条数据
2020/04/06 PHP
jquery高级编程的最佳实践详解
2014/03/23 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
javascript中setTimeout使用指南
2015/07/26 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python3.5面向对象程序设计之类的继承和多态详解
2019/04/24 Python
python设置随机种子实例讲解
2019/09/12 Python
基于Tensorflow的MNIST手写数字识别分类
2020/06/17 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
Python文件操作的面试题
2013/06/22 面试题
个性与发展自我评价
2014/02/11 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
节能环保口号
2014/06/12 职场文书
社团活动总结书
2014/06/27 职场文书
供用电专业求职信
2014/07/07 职场文书
担保书范本
2015/01/20 职场文书
亮剑观后感
2015/06/05 职场文书
2015年科普工作总结
2015/07/23 职场文书
公司岗位说明书
2015/10/08 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
PHP解决高并发问题
2021/04/01 PHP