给属性渲染数据不能使用 {{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. 《HelloGitHub》第 86 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  2. Blazor HyBrid 授权讲解

    Blazor HyBrid 授权讲解 本文介绍 ASP.NET Core 对 Blazor Hybrid 应用中的安全配置和管理及 ASP.NET Core Identity 的支持. Blazor ...

  3. 谈谈ChatGPT是否可以替代人

    起初我以为我是搬砖的,最近发现其实只是一块砖,哪里需要哪里搬. 这两天临时被抽去支援跨平台相关软件开发,帮忙画几个界面.有了 ChatGPT 之后就觉得以前面向 Googel 编程会拉低我滴档次和逼格 ...

  4. 魔力屏障 (magic) 题解

    魔力屏障 (magic) [问题描述] 小 Z 生活在神奇的魔法大陆上.今天他的魔法老师给了它这样一个法阵作为它 的期末考试题目: 法阵由从左至右 n 道魔力屏障组成,每道屏障有一个临界值 a,如果它 ...

  5. 国际顶刊《PNAS》:爱发朋友圈的人,更容易长寿

    点上面关注我们,每日获取前沿新知 近几十年来,智能手机和网络的普及率越来越高,与此同时,"朋友圈"应运而生. 在这个朋友圈里,有人十分活跃,而也有些人是"国家级潜水运动员 ...

  6. Active Directory Basic

    Active Directory 是 Windows 域网络的目录服务 介绍 Active Directory 是在域内部连接的机器和服务器的集合,它们是构成 Active Directory 网络的 ...

  7. 分布式数据库 Join 查询设计与实现浅析

    相对于单例数据库的查询操作,分布式数据查询会有很多技术难题. 本文记录 Mysql 分库分表 和 Elasticsearch Join 查询的实现思路,了解分布式场景数据处理的设计方案. 文章从常用的 ...

  8. C++内敛函数,构造函数,析构函数,浅拷贝

    inline //inline函数可以有声明和实现,但是必须在同一文件//inline函数不能分成头文件和实现文件 inline int add(int x, int y){ //一般不要放循环语句 ...

  9. AGC019F Yes or No

    题意 有 \(N+M\) 个问题,其中有 \(N\) 个问题的答案是 YES,\(M\) 个问题的答案是 NO.当你回答一个问题之后,会知道这个问题的答案,求最优策略下期望对多少.答案对 \(9982 ...

  10. 新建maven项目的时候idea的一些设置

    1.统一字符编码 2.开启注解生效激活 3.选择编译编码格式 4.设置忽略文件