一起学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. Django 使用request获取浏览器发送的参数(Django编程-5)

    1.url:需要正则去匹配 url(r'^index/(num)/$',view.index) 匹配到的参数会自动传入对应的视图函数 也可以给匹配到的参数起名字?P url(r'^index/(?P& ...

  2. ffmpeg3.3.2命令行参数笔记

    组成: 1.libavformat:用于各种音视频封装格式的生成和解析,包括获取解码所需信息以生成解码上下文结构和读取音视频帧等功能,包含demuxers和muxer库: 2.libavcodec:用 ...

  3. ASP.NET c# 实验日记（1）

    第一次写有一些紧张,以前学过html,c语言,vb,c#等语言.也自己翻过有关javascript的书,现在的目的是怎么把学习经验写的更具结构化和条理化,大佬勿喷. 在一个集成开发平台里第一步就是新建 ...

  4. Python之路：进程、线程

    目录 一.进程与线程区别 1.1 什么是线程 1.2 什么是进程 1.3 进程与线程的区别 二.Python GIL全局解释器锁 三.线程 3.1 threading模块 3.2 Join & ...

  5. airflow介绍

    1. airflow 介绍 1.1 airflow 是什么 Airflow is a platform to programmatically author, schedule and monitor ...

  6. libusb读写

    https://blog.csdn.net/u012247418/article/details/83684980 https://github.com/crazybaoli/libusb-test ...

  7. MySQL更新字段来自另一个表的count()值

    假设有文章post和评论comment两个表,文章表记录有评论的数量,但是这个值我们要一次更新. 如下,现在post表的comment_count都是0,我们的目标是:执行一个SQL语句,让其把统计c ...

  8. json dumps dump区别

    .json.dumps()和json.loads()是json格式处理函数(可以这么理解,json是字符串) (1)json.dumps()函数是将一个Python数据类型列表进行json格式的编码( ...

  9. PM、RD、QA、OP、CM、EPG 英文缩写是什么意思？

    1.PM: Product Manager,产品经理,又称品牌经理.举凡产品从创意到上市,所有相关的研发.调研.生产.编预算.广告.促销活动等等,都由产品经理掌控. 2.RD: Research an ...

  10. 二进制数组-ArrayBuffer对象

    ArrayBuffer对象:存储二进制数据的一段内存,不能写/读 ,类似数组的对象 只能通过TypedArray视图/DataView视图 读/写 va buf = new ArrayBuffer(3 ...