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 相关文章推荐
Array.prototype.slice.apply的使用方法
Mar 17 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
JavaScript变量声明详解
Nov 27 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
jQuery超酷平面式时钟效果代码分享
Mar 30 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
基于Vant UI框架实现时间段选择器
Dec 24 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无限极分类实现的两种解决方法
2013/04/28 PHP
定义php常量的详解
2013/06/09 PHP
CentOS下PHP7的编译安装及MySQL的支持和一些常见问题的解决办法
2015/12/17 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
PHP实现微信对账单处理
2018/10/01 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
Javascript 中的 call 和 apply使用介绍
2012/02/22 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
2020/08/05 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
python转换摩斯密码示例
2014/02/16 Python
python中的代码编码格式转换问题
2015/06/10 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
Python内置函数delattr的具体用法
2017/11/23 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
python中threading开启关闭线程操作
2020/05/02 Python
Python 爬虫的原理
2020/07/30 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
HTML5声音录制/播放功能的实现代码
2018/05/03 HTML / CSS
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
Ejb技术面试题
2015/04/29 面试题
行政工作试用期自我评价
2014/09/14 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书