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 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
学习Vue组件实例
Apr 28 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
vue el-tree 默认展开第一个节点的实现代码
May 15 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
PHP简介
2006/10/09 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
一些mootools的学习资源
2010/02/07 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
jQuery的文档处理程序详解
2016/05/10 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
详解jQuery设置内容和属性
2019/04/11 jQuery
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python的动态重新封装的教程
2015/04/11 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
美国女士泳装店:Swimsuits For All
2017/03/02 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
幼儿园运动会加油词
2014/02/14 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
慈善晚会策划方案
2014/05/14 职场文书
4s店活动策划方案
2014/08/25 职场文书
单位授权委托书范本
2014/09/26 职场文书
Vue中foreach数组与js中遍历数组的写法说明
2021/06/05 Vue.js
MySQL 字符集 character
2022/05/04 MySQL