//html
<div id="app">
  <input type="button" value="ok" v-bind:title="msg">
  <input type="button" value="ok" v-bind:title="msg +'123aaa' ">//也可以拼接字符串,渲染出来是 点击一下123aaa
</div>
//script
<script>
  var vm = new Vue({
    el:'app',
    data:{
      msg:'点击一下'
    }
  })
</script>

说明:v-bind是用来绑定属性变量的,如果没有v-bind那么鼠标放到ok按钮上的时候,悬浮的标题是“msg”字符串,而不是msg中的内容

只有通过v-bind绑定title属性的msg变量   title才会取到msg中的内容,鼠标放上去,悬浮的标题是“点击一下”

v-bind是可以省略不写的,只留冒号 就默认表示使用了v-bind绑定某个属性变量  v-bind中可以写合法的js表达式

vue学习(三) v-bind指令的更多相关文章

  1. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

  2. vue学习-day02(自定义指令,生命周期)

    目录: 1.案例:品牌管理    2.Vue-devtools的两种安装方式    3.过滤器,自定义全局或私有过滤器    4.鼠标按键事件的修饰符    5.自定义全局指令:让文本框获取焦点   ...

  3. Vue学习之路4-v-bind指令

    1. 定义 1.1 v-bind 指令被用来响应地更新 HTML 属性,其实它是支持一个单一 JavaScript 表达式 (v-for 除外). 2. 语法 2.1 完整语法:<span v- ...

  4. Vue学习之路5-v-model指令

    1. 指令释义 v-model在表单控件或者组件上创建双向绑定,本质上是负责监听用户的输入事件(onchange,onkeyup,onkeydown等,具体是哪个,还请查阅官方底层实现文档)以更新数据 ...

  5. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  6. 三 vue学习三 从读懂一个Vue项目开始

    源码地址:     https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 项目构建(webpack)相关代码. config ...

  7. vue学习(十七) 使用自定义指令 使文本框获得鼠标焦点

    需求:当我们进入某个页面,页面中的第一个input会自动获得焦点 光标闪烁,代表可输入 <div id="app"> //v-focus 是自定义的 <input ...

  8. Vue学习之路8-v-on指令学习简单事件绑定之属性

    前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简 ...

  9. Vue学习之路7-v-on指令学习之简单事件绑定

    前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不 ...

随机推荐

  1. MySQL8.0窗口函数实践及小结

    MySQL8.0之前,做数据排名统计等相当痛苦,因为没有像Oracle.SQL SERVER .PostgreSQL等其他数据库那样的窗口函数.但随着MySQL8.0中新增了窗口函数之后,针对这类统计 ...

  2. 平时自己常用的git指令

    增删改查 创建标签 $ git tag -a v1.4 -m 'my version 1.4' 用 -a (译注:取 annotated 的首字母)指定标签名字即可 -m 选项则指定了对应的标签说明 ...

  3. Python 中的元类到底是什么?这篇恐怕是最清楚的了

    类作为对象 在理解元类之前,您需要掌握 Python 的类.Python 从 Smalltalk 语言中借用了一个非常特殊的类概念. 在大多数语言中,类只是描述如何产生对象的代码段.在 Python ...

  4. [SCOI2016]背单词 题解

    背单词 https://www.luogu.com.cn/problem/P3294 前言: Trie树的省选题(瑟瑟发抖QAQ) 问题汇总:(请忽略) (1)对Trie字典树的运用不熟练 (2)没想 ...

  5. 解决Linux搜狗输入法工具栏无法移动

    问题的出现 前两天一位朋友(@午后下午茶)发现一个有趣的情况: 为了复现bug,我把自己的输入法工具栏也挪到了顶栏,果然也无法挪动了 解决方法 原理不明,但解决方法很简单. 如图所示,随便找个输入框打 ...

  6. Python爬虫:手把手教你写迷你爬虫架构

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:我爱学Python 语言&环境 语言:继续用Python开路 ...

  7. 微信小程序中的深拷贝与浅拷贝问题

    最近在弄小程序项目的时候遇到了一个json对象复制的问题,也就是俗称的深拷贝与浅拷贝了. 一般用变量直接接收就是浅拷贝,那么如何理解浅拷贝与深拷贝的意义呢? 浅拷贝:只是将对象地址的复制,并没有开辟新 ...

  8. javascript基础(三): 操作DOM对象(重点)

    DOM:文档对象模型 核心 浏览器网页就是一个Dom树形结构! 更新:更新Dom节点 遍历Dom节点:得到Dom节点 删除:删除一个Dom节点 添加:添加一个新的节点 要操作一个Dom节点,就必须要先 ...

  9. 数据可视化之分析篇(一)使用Power BI进行动态帕累托分析

    https://zhuanlan.zhihu.com/p/57763423 通过简单的点击交互,就能进行动态分析发现见解,才是我们需要的,恰好这也是 PowerBI 所擅长的. 就帕累托分析来说,能从 ...

  10. DirectX11 With Windows SDK--33 曲面细分阶段(Tessellation)

    前言 曲面细分是Direct3D 11带来的其中一项重要的新功能.它引入了两个可编程着色器阶段以及一个固定的镶嵌处理过程.简单来说,曲面细分技术可以将几何体细分为更小的三角形,并以某种方式把这些新生成 ...