vue中v-for循环给标签属性赋值的方法

2018-10-18 46 AN_MIN

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文章

iframe的父子窗口之间的对象相互调用基本用法
Sep 03 43
js实现网站最上边可关闭的浮动广告条代码
Sep 04 37
vue中各选项及钩子函数执行顺序详解
Aug 25 45
Vue.js组件实现选项卡以及切换特效
Jul 24 37
vue中英文切换实例代码
Jan 21 53
JavaScript实现拖拽功能
Feb 11 47
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 59
手机访问当前页面