vue动态创建标签,vue动态绑定背景图
动态绑定是我们在日常开发中经常遇到的需求。下面文章主要介绍vue动态绑定图标的相关信息，通过示例代码非常详细的介绍。有需要的朋友可以参考一下。
0 图标和图片的不同
图标字符，图片都是二进制流。就是图片加载会比图标慢，最好不要用img标签加载图标。我们可以将图标作为组件导入，然后作为标签引入。
1 安装svg
1.以管理员身份运行cmd窗口，切换到项目目录执行。
npm添加svg
2 从图标库下载图标
1.阿里地图库
https://www.iconfont.cn/
2.下载svg
3.在compone目录下建立一个图标，在图标下建立一个svg目录，专门放图标。
3 查看插件的使用方法
vue的所有插件都在node_modules中。
下载时根据插件名称找到插件e-cli-plugin-svg的自述文件。
4 展示图标
1 定义动态组件MyIcon.vue
1.其中myicon是从父组件传递的属性。
2.computed用于根据myicon.name(图标的名称)动态生成图标地址。原因是当组件在导出默认{}之外引入时，我们收到的props属性无法在导出默认{}之外传递，所以我们使用computed来帮助生成图标组件。
3.style是动态绑定样式，其中宽度和高度是绑定的。并在props中设置默认值。如果父组件没有传递宽度和高度信息，它将使用默认值。
4.fill绑定填充属性style，默认值也是在props中设置的。
模板
差异
成分
:is=icon
:style={width : myicon.width，high:my icon . high }
:fill=myicon.fill
/组件
/div
/模板
脚本
导出默认值{
道具：{
我的图标：{
名称：{
类型：字符串
},
宽度：{
类型：字符串，
默认值：“40px”
},
高度：{
类型：字符串，
默认值：“40px”
},
填充：{
类型：字符串，
默认值：“#000000”
}
}
},
计算值：{
icon(){
return()=import( @/components/icons/SVG/ this . myicon . name )。svg？内嵌’)
}
}
}
/脚本
风格
/风格
2 在main,js中全局引入并定义组件MyIcon.vue
从“@/components/MyIcon.vue”导入mysvg
Vue.component(my-icon ，mysvg)
3 调用my-icon作为父组件
1.定义要在myicon:{}中传递的属性，其中name是必选的，是不带后缀的图标名称。
模板
我的图标
:name=scope.row.icon
:宽度=50px
:hight= 50px
:fill=#ff00ff
/我的图标
/模板
脚本
导出默认值{
data() {
返回{
我的图标：{
姓名：职位，
宽度：“60px”，
高：“60px”，
填充： #ff00ff
},
}
},
}
/脚本
样式范围语言=less
/风格
总结
这就是这篇关于vue动态绑定图标的文章。有关vue动态绑定图标的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。