脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → v for 循环标签属性赋值

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

 更新时间：2018年10月18日 15:30:04   作者：AN_MIN  
这篇文章主要介绍了vue中v-for循环给标签属性赋值的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

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循环给标签属性赋值的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • vue实现商品列表的无限加载思路和步骤详解

    vue实现商品列表的无限加载思路和步骤详解

    这篇文章主要介绍了vue实现商品列表的无限加载思路和步骤详解,基础思路是触底条件满足之后 page++,拉取下一页数据,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下,
    2024-06-06
  • 详解关于Vue单元测试的几个坑

    详解关于Vue单元测试的几个坑

    这篇文章主要介绍了关于Vue单元测试的几个坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • Vue中全局常用的过滤方法解读

    Vue中全局常用的过滤方法解读

    这篇文章主要介绍了Vue中全局常用的过滤方法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-01-01
  • vue中axios防止多次触发终止多次请求的示例代码（防抖）

    vue中axios防止多次触发终止多次请求的示例代码（防抖）

    这篇文章主要介绍了vue中axios防止多次触发终止多次请求的实现方法（防抖）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • JavaScript实现简单的图片切换功能(实例代码)

    JavaScript实现简单的图片切换功能(实例代码)

    这篇文章主要介绍了JavaScript实现简单的图片切换功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
    2020-04-04
  • vue动态组件之:is在组件中的使用场景

    vue动态组件之:is在组件中的使用场景

    这篇文章主要介绍了vue动态组件之:is在组件中的使用场景,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-07-07
  • 对 Vue-Router 进行单元测试的方法

    对 Vue-Router 进行单元测试的方法

    这篇文章主要介绍了对 Vue-Router 进行单元测试的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 在vue中实现表单验证码与滑动验证功能的代码详解

    在vue中实现表单验证码与滑动验证功能的代码详解

    在Web应用程序中，表单验证码和滑动验证是常见的安全机制，用于防止恶意攻击和机器人攻击，本文将介绍如何使用Vue和vue-verify-code库来实现表单验证码和滑动验证功能,需要的朋友可以参考下
    2023-06-06
  • vue实现表格增删改查效果的实例代码

    vue实现表格增删改查效果的实例代码

    本篇文章主要介绍了vue实现增删改查效果的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • nuxt+axios解决前后端分离SSR的示例代码

    nuxt+axios解决前后端分离SSR的示例代码

    这篇文章主要介绍了nuxt+axios解决前后端分离SSR的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论