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 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
解读JavaScript中 For, While与递归的用法
May 07 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
Jan 26 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
解决Vue @submit 提交后不刷新页面问题
Jul 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
php&amp;java(二)
2006/10/09 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
JS backgroundImage控制
2009/05/19 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
浅析Node.js非对称加密方法
2018/01/29 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
2018/09/29 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
js实现小星星游戏
2020/03/23 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
js实现筛选功能
2020/11/24 Javascript
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python列表list排列组合操作示例
2018/12/18 Python
numpy.where() 用法详解
2019/05/27 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
机器人瓦力观后感
2015/06/12 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python