给属性渲染数据不能使用 {{name}} 标记, 请使用 v-bind:属性名称=”name”

name是json数据键值对中的键名, 请配合下面JS代码片食用

HTML

<div id="sidebar">
<ul>
<li v-for="list in lists" v-bind:class="class">
<img v-bind:src="list.src" />
</li>
</ul>
</div>

JS

var app = new Vue({
el: '#sidebar>ul',
data:{
"lists":[
{ src:"icon.png" },
{ src:"icon.png" },
{ src:"icon.png" },
],
class:"active",
name:"剑齿虎"
}
});

Vue用v-bind给标签属性赋值 src, href...的更多相关文章

  1. js拼接url以及为html某标签属性赋值

    记录 js拼接url 比如有些时候我们需要为某按钮实现跳转,可以利用下面的方式做到: function ReturnIndex() { var rex = RegExp("tools&quo ...

  2. vscode 如何格式化vue(template)html代码 , 保持标签属性不换行

    微软的vscode 真心强大 , electron 框架写的 , 用js写的桌面应用 , 有能力的话大家可以分析一下人家的源码 , 反正我是看不了 , 太牛掰了 在一次跟新后我发现莫名奇妙的些在组件( ...

  3. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  4. [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...

  5. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 http://www.abc.com/test.mp3&quo ...

  7. 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码  <au ...

  8. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  9. HTML5 Audio/Video 标签属性与事件

    chrom 只测试过部分属性,均正常,兼容性未测试: 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 标签属性 ...

  10. Vue.js自定义标签属性并获取属性,及绑定img的src属性的坑

    一.定义属性: 一般定义属性都是为了动态的去获取属性的值,或者动态的设置属性的值,如果想仅仅是设置一个普通的属性,直接在便签上设置属性即可,就像使用html的title.name等属性一样,如< ...

随机推荐

  1. flutter系列之:做一个下载按钮的动画

    目录 简介 定义下载的状态 定义DownloadButton的属性 让DownloadButton的属性可以动态变化 定义downloadController 定义DownloadButton的细节 ...

  2. (亲测有效-专门解决Mac环境)Pycharm 解决无法打开的问题

    前提是Mac 安装了PyCharm.app 1.第一步:先输入: cd /Applications/PyCharm.app/Contents/MacOS 2.第二步:查看无法打开pycharm的原因, ...

  3. 搭建一个属于自己的springboot项目

    一.确定环境 最近公司要上个新系统,指定由我来带两个人进行开发,既然是新项目,那么项目搭建的事就落到我的头上了.现在都是使用springboot进行开发,为此我搭环境使用的是springboot,具体 ...

  4. JavaWeb编程面试题——Spring Web MVC

    引言 面试题==知识点,这里所记录的面试题并不针对于面试者,而是将这些面试题作为技能知识点来看待.不以刷题进大厂为目的,而是以学习为目的.这里的知识点会持续更新,目录也会随时进行调整. 关注公众号:编 ...

  5. 苹果WWDC发布会总结

    今年的全球开发者大会没有让人失望.在今天的主题演讲中,苹果首次展示了备受期待的混合现实耳机,证实了过去几个月出现的许多谣言. 虽然这次苹果的 Vision Pro耳机成为了焦点,但该公司还发布了一些其 ...

  6. SQL Server 日志传输还原作业执行缓慢

    目录 情景 故障定位 VLF 对 Restore 的影响 问题 解决方案 方案1 方案 2 参考资料 情景 IP 角色 192.168.1.61 Primary 192.168.1.59 Second ...

  7. 前端Vue自定义简单实用轮播图封装组件 快速实现轮播图

    前端Vue自定义简单实用轮播图封装组件 快速实现轮播图, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13153 效果图如下: ...

  8. 使用Flask和Django构建Web应用程序:现代Web应用程序框架

    目录 1. 引言 2. 技术原理及概念 2.1 基本概念解释 2.2 技术原理介绍 2.3 相关技术比较 3. 实现步骤与流程 3.1 准备工作:环境配置与依赖安装 3.2 核心模块实现 3.3 集成 ...

  9. Cisco命令中login和login local的区别

    login是开启远程登录密码验证,login local不但要求密码,还要求提供用户名 如果同时设置login和login local,login local有效 (config-line)#line ...

  10. Multi-Modal Attention Network Learning for Semantic Source Code Retrieval 解读

    Multi-Modal Attention Network Learning for Semantic Source Code Retrieva Multi-Modal Attention Netwo ...