一起学vue指令之v-bind

一起学 vue指令 v-bind 

网页的图片url地址并不是固定写死的，如果写死，每一个活动就改一次图片的url,一个网页有多少张图片，工作量多大？

通常来说，客户端向服务器发送请求，服务器返回url数据到vue实例的data数据中，由于url动态绑定了vue实例的data，所以会实时更新图片.无需我们手工更改，并且不会出错。

有的同学说，直接用插值语法不就行了？

插值语法【mustache】{{}}仅用于标签的内容值【即下图的<h2>标签包裹的值】，无法作用于标签属性。


如果强行给属性进行插值赋值，那么属性值就是该插值的字符串

如果强行给属性进行插值赋值，那么属性值就是该插值的字符串。


如果强行给属性进行插值赋值，那么属性值就是该插值的字符串。

如果强行给属性进行插值赋值，那么属性值就是该插值的字符串。

此时需要v-bind指令，使用该指令后，字符串url不再是一个字符串，而是一个变量。src将获得该变量的值


使用v-bind

一起学vue指令之v-bind的更多相关文章

  1. 一起学vue指令之v-text

    一起学vue指令之v-text 一起学 vue指令 v-text  指令可看作标签属性 v-text的功能和v-html很相似,都是在容器标签内控制字符串内容的输出,v-text输出纯文本,而v-ht ...

  2. 一起学vue指令之v-pre

    一起学vue指令之v-pre 一起学 vue指令 v-pre  指令可看作标签属性 浏览器解析引擎遇到vue的插值符号时会自动解析,当你想输出不被解析的纯文本时,可以使用v-pre指令. 未使用v-p ...

  3. 一起学vue指令之v-html

    一起学vue指令之v-html 一起学 vue指令 v-html  指令可看作标签属性 某些情况下,我们点击百度搜索下一页,服务器应该就返回下一页的数据页面,包含其他资源链接等. 返回的数据的本质是一 ...

  4. 一起学vue指令之v-once

    一起学vue指令之v-once 一起学 vue指令 v-once  指令可看作标签属性 v-once 口该指令后面不需要跟任何表达式(v-for后面接表达式) 口该指令表示元素和组件只渲染一次,不会随 ...

  5. vue指令之v-cloak

    vue指令之v-cloak 一起学 vue指令 v-cloak  指令可看作标签属性 某些情况下可能由于机器性能故障或者网络原因,导致传输有问题,那么浏览器无法成功解析数据,此时浏览器输出的内容就是纯 ...

  6. 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  7. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

  8. (尚016)Vue指令(11个自带指令+自定义指令)

    1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...

  9. vue指令与$nextTick 操作DOM的不同之处

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...

随机推荐

  1. json字符串与json对象的转换

    JSON(JavaScript Object Notation)格式是开发中较为常见的数据格式,优点是轻量,便于理解和解析生成.JSON对象是一个无序的键值对集合,以 { } 为开头和结尾,键与键之间 ...

  2. redis blog

    IBM 看到的blog如何 存储在redis种 var ArticleHelper = function () { this.ArticleIDSet = "AIDSet"; // ...

  3. mysql总结1

    修改表名:alter table table_name rename new_table_name; 添加字段:alter table table_name add column_name type_ ...

  4. new一个有父类的对象时各代码块的执行顺序问题

    public class QQ { public static void main(String[] args) { new B(); } } class A { static { System.ou ...

  5. Mongodb的聚合和管道

    MongoDB 聚合 MongoDB中聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果. aggregate() 方法 MongoDB中聚合的方法使用agg ...

  6. DevExpress ASP.NET Core v19.1版本亮点：Pivot Grid控件等

    行业领先的.NET界面控件DevExpress 发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExpress ASP.NET Core Controls v19.1中新增的一些控件及增强 ...

  7. grunt-css-sprite css 代码中的切片合并

    安装插件:npm install grunt-css-sprite --save-dev grunt-css-sprite主要功能:1.对 css 文件进行处理,收集切片序列,生成雪碧图2.在原css ...

  8. 【LOJ#536】「LibreOJ Round #6」花札

    题目链接 题目描述 「UniversalNO」的规则如下:每张牌有一种颜色和一个点数.两个人轮流出牌,由 Alice 先手,最开始牌堆为空,出的人可以出任意牌(放到牌堆顶),之后出的牌必须和当时牌堆顶 ...

  9. BeanUtils对象属性copy的性能对比以及源码分析

    1. 对象属性拷贝的常见方式及其性能 在日常编码中,经常会遇到DO.DTO对象之间的转换,如果对象本身的属性比较少的时候,那么我们采用硬编码手工setter也还ok,但如果对象的属性比较多的情况下,手 ...

  10. zrender-部分小知识点集合

    1.存组件元素和取组件元素,会在数据更新时,将存起来的拿出来 在construct(){ this.saveData=[];//先声明一个空的数组 } //存的方法 setSave(ele,i,nam ...