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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
JavaScript中的Repaint和Reflow用法详解
Jul 27 Javascript
React.js入门学习第一篇
Mar 30 Javascript
jQuery ajax应用总结
Jun 02 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
Feb 03 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
javascript实现留言板功能
Feb 08 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 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中PDO基础教程 入门级
2011/09/04 PHP
PHP SPL使用方法和他的威力
2013/11/12 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
解决php的“It is not safe to rely on the system’s timezone settings”问题
2015/10/08 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
使用tensorflow实现线性svm
2018/09/07 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
耐克中国官方商城:Nike中国
2018/10/18 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
银行演讲稿范文
2014/01/03 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
经销商会议开幕词
2016/03/04 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
Vue深入理解插槽slot的使用
2022/08/05 Vue.js