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 弹出登录窗口实现代码
Dec 24 Javascript
使用documentElement正确取得当前可见区域的大小
Jul 25 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
详解前端自动化工具gulp自动添加版本号
Dec 20 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 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扩展图文教程
2008/12/12 PHP
PHP 变量类型的强制转换
2009/10/23 PHP
php cli配置文件问题分析
2015/10/15 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
tagName的使用,留一笔
2006/06/26 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
js数组方法扩展实现数组统计函数
2014/04/09 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python3编码问题汇总
2016/09/06 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
阿里云:Aliyun.com
2017/02/15 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
自荐信格式
2013/12/01 职场文书
教育局长自荐信范文
2013/12/22 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
材料员岗位职责范本
2015/04/11 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
oracle索引总结
2021/09/25 Oracle