给属性渲染数据不能使用 {{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. linux 管理进程和计划任务

    目录 一.进程原理 二.进程工作过程 三.进程类型 四.管理进程 五.前后台调度 六.定时任务 七.管理定时任务 一.进程原理 进程:指正在运行的程序称之为进程 程序:指的是没有运行的代码 线程:真正 ...

  2. SpringBoot打包成WAR包的时候把第三方jar包打到LIB文件夹下和把第三方jar包打入到SpringBoot jar包中

    SpringBoot打包成WAR包的时候把第三方jar包打到LIB文件夹下和把第三方jar包打入到SpringBoot jar包中 转载 首先我们应该知道我们把SPRINGBOOT项目打包成WAR包和 ...

  3. Apikit SaaS 10.9.0 版本更新: 接口测试支持通过 URL 请求大型文件,支持导出为 Postman 格式文件

    Hi,大家好! Eolink Apikit 即将在 2023年 6月 8日晚 18:00 开始更新 10.9.0 版本.本次版本更新主要是对多个应用级资源合并,并基于此简化付费套餐和降低费率. 本次应 ...

  4. 软件测试从小白进阶高手-Python自动化+Jmeter性能+App项目+接口测试

    软件测试从小白进阶高手-Python自动化+Jmeter性能+App项目+接口测试 软件测试技能,包括Python自动化.Jmeter性能测试.App项目测试.接口测试.接下来,我将从每个技能点给出一 ...

  5. JUC同步锁原理源码解析六----Exchanger

    JUC同步锁原理源码解析六----Exchanger Exchanger Exchanger的来源 A synchronization point at which threads can pair ...

  6. 02-面试必会-SSM框架篇

    01-什么是 Spring IOC 和 DI ? IOC : 控制翻转 , 它把传统上由程序代码直接操控的对象的调用权交给容 器,通过容器来实现对象组件的装配和管理.所谓的"控制反转&quo ...

  7. RSA 加密签名验签解密

    import javax.crypto.Cipher; import javax.crypto.spec.OAEPParameterSpec; import javax.crypto.spec.PSo ...

  8. [solved] login to server failed: EOF

    问题 frp 报错:login to server failed: EOF 解决方案 客户端配置 common 下 添加 tls_enable = true [common] tls_enable = ...

  9. selenium元素定位---ElementNotInteractableException(元素不可交互异常)解决方法

    方法一: 增加强制等待时间 方法二: 使用js点击 element = self.browser.find_element(By.XPATH, "//td[@class='el-table_ ...

  10. 从头学Java17-Modules模块

    模块Modules 了解module系统如何塑造 JDK,如何使用,使项目更易于维护. 烧哥注 从头讲JDK17的文章比较少,英文为主,老外虽能讲清原理,但写的比较绕,所以决定翻译一下,也有个别细节完 ...