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脚本实现Web页面信息交互
Oct 11 Javascript
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
jQuery实现简单三级联动效果
Sep 05 jQuery
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
JavaScript实现手风琴效果
Feb 18 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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
PHP 开发环境配置(测试开发环境)
2010/04/28 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
js HTML5手机刮刮乐代码
2020/09/29 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
webpack多入口多出口的实现方法
2018/08/17 Javascript
js实现烟花特效
2020/03/02 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Django如何配置mysql数据库
2018/05/04 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
详解python的argpare和click模块小结
2019/03/31 Python
python中web框架的自定义创建
2019/09/08 Python
python中count函数简单的实例讲解
2020/02/06 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
悬挂训练绳:TRX
2017/12/14 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
班组安全员工作职责
2014/02/01 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
Python利用zhdate模块实现农历日期处理
2022/03/31 Python