一起学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. echarts属性的设置

    // 全图默认背景  // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd ...

  2. Cesium-entiy闪烁范例

    // name:"圆闪烁", function f1() { var x=1; var flog=true; viewer.entities.add({ name:"圆形 ...

  3. 前端开发 | 尝试用Markdown写一下近几个月的总结

    近期总结 回顾 半年前 半年前,接触了前端一年多(工作半年)的我了解的东西只有下面这些.因为在公司里的工作就是切静态页,捣鼓CMS. HTML (比较简洁的编写HTML) CSS/CSS3 (PC兼容 ...

  4. centos 7 Network 脚本

    #!/bin/sh #主动启动网卡 interface=$() ifup $interface #获取当前网络信息 default_route=$(ip route show) default_int ...

  5. 从subversion开始(svn安装配置全过程(+全套安装文件与配置文件))…..

    从subversion开始(svn安装配置全过程(+全套安装文件与配置文件))-.. 博客分类: 工具使用 SVNsubversion配置管理Apache应用服务器  </div> 花了一 ...

  6. 织梦网站dedecms防止挂马的思路

    DedeCms做为国内使用最为广泛使用人数最多的CMS之一,经常爆出漏洞,每个漏洞的爆出,影响都是一大片,轻则被人挂广告.弹框,重则服务器成为肉机,宝贵数据丢失.那么有什么办法可以提高DedeCms的 ...

  7. Django学习系列11:在服务器中处理POST请求

    之前的代码还没有为表单指定action=属性,因此提交表单默认返回之前渲染的页面,即“/”,这个由视图函数home_page处理.下面修改这个视图函数,让它能处理POST请求. 这意味着要为视图函数h ...

  8. jmeter中的几种参数化场景

    1.request路径中引用参数 2.body中引用参数 3.parameter中引用参数 4.header中引用参数,如token这类跟用户相关参数 5.response assertion中引用参 ...

  9. 提取包含QQ的文本为QQ邮箱

    # -*- coding: utf-8 -*- """ Created on Sun Dec 15 14:08:03 2019 @author: Dell 提取包含QQ号 ...

  10. linux负载均衡杂谈

    假如架构中的主机拥有全量数据集,即使其中一台挂了,也不会导致离线,高可用(负载均衡集群) 假如架构中的各主机只拥有sharing,那我们谓之 分布式集群 硬件ctrix F5-BIG-IP(一台动辄2 ...