一起学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. Action注入错误

    2016-07-13 13:52:09,584 [ERROR]-[com.opensymphony.xwork2.util.logging.commons.CommonsLogger:38] Exce ...

  2. 第三篇 HTML 表单及表格

    表单及表格 表单,常用在登录.注册等地方,这也是一个最基本的.   我们就用登录,来学习什么是表单!   表单 form 标签,在某些好用的编辑工具,比如:WebStorm  你在上面写出form再按 ...

  3. LaTeX的tasks宏包

    tasks 宏包 LaTeX的列表(list)通常是将项(item,条目)一个一个垂直的平行显示,所谓"列"表的由来. 水平分列列表,即将多个项分散到各列而不是一列,在出考卷的选择 ...

  4. selenium 模拟登陆豆瓣，爬取武林外传的短评

    selenium 模拟登陆豆瓣,爬去武林外传的短评: 在最开始写爬虫的时候,抓取豆瓣评论,我们从F12里面是可以直接发现接口的,但是最近豆瓣更新,数据是JS异步加载的,所以没有找到合适的方法爬去,于是 ...

  5. 深入理解并使用python的模块与包

    模块 编写好的一个python文件可以有两种用途:1)脚本,一个文件就是整个程序,用来被执行2)模块,文件中存放着一堆功能,用来被导入使用 模块的分类 1)开发者编写的 .py文件2 ) 由C或C++ ...

  6. Spark查询yarn任务日志

    查看日志:yarn logs -applicationId application_xxx 导入到外部文件 yarn logs -applicationId application_xxx >& ...

  7. Jmeter Beanshell 编程简介

    简介 Jmeter除了提供丰富的组件以外,还提供脚本支持,可通过编写脚本来丰富Jmeter,实现普通组件无法完成的功能.Beanshell是一种轻量级的Java脚本语言,完全符合Java规范,并且内置 ...

  8. ubuntu下usb抓包方法步骤--usbmon

    开发或者调试USB设备相关的工具或者驱动,一个调试的利器就是usbmon抓包. 在ubuntu下使用步骤如下: 1 运行命令  sudo  mount -t debugfs none  /sys/ke ...

  9. JDK8之Stream新特性

    https://www.cnblogs.com/cbxBlog/p/9123106.html /** *JDK8 Stream特性 * Created by chengbx on 2018/5/27. ...

  10. myeclipse 工具栏 Run按钮不见了，怎么调出来啊?

    window-->new window,打开新窗口,按钮出现了.关闭老窗口,再关闭新窗口.再次打开MyEclipse,妥妥的了.