//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. ajax前后端交互原理(3)

    3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...

  2. 为什么Spring Security看不见登录失败或者注销的提示

    有很多人在利用Spring Security进行角色权限设计开发时,一般发现正常登录时没问题,但是注销.或者用户名时,直接就回到登录页面了,在登录页面上看不见任何提示信息,如“用户名/密码有误”或“注 ...

  3. 最快安装AndroidStudio的方法(小歪整理)

    最快安装AndroidStudio的方法(小歪整理)-干货,加速加载和解决无法预览布局文件的等问题 最快安装AndroidStudio的方法(小歪整理) 1.使用解压压缩包的方式安装:android- ...

  4. Demo_2:Qt实现猜字小游戏

    1  环境 系统:windows 10 代码编写运行环境:Qt Creator 4.4.1 (community) Github: 2  简介 参考视频:https://www.bilibili.co ...

  5. node实现文件属性批量修改(文件名)

    前言 书接上回,我们实现了批量修改文件的时间,但是却没有实现文件名称的批量修改,是因为我也说过,没有界面的话直接在命令行实现显得有点繁琐,所以我们就通过接口+界面的方式来实现我们这个小需求吧.所以,闲 ...

  6. P3261 [JLOI2015]城池攻占 题解

    题目 小铭铭最近获得了一副新的桌游,游戏中需要用 \(m\) 个骑士攻占 \(n\) 个城池.这 \(n\) 个城池用 \(1\) 到 \(n\) 的整数表示.除 \(1\) 号城池外,城池 \(i\ ...

  7. BUUCTF-Misc-No.4

    比赛信息 比赛地址:Buuctf靶场 内心os(蛮重要的) 我只想出手把手教程,希望大家能学会然后自己也成为ctf大佬,再来带带我QWQ 被偷走的文件 | SOLVED | foremost分离一下文 ...

  8. python中获取文件路径的几种方式

    # 如果执行文件为E:\aa\bb\aa.py 1.获取当前路径 current_path11 = os.path.abspath(__file__) current_path12 = os.path ...

  9. APP开发---Windows查看端口是否被占用

    前言:在后台设计的过程中,当你把后台的代码编辑好之后经常会发现,上传jar包之后,却出现了错误,错误结果显示端口被占用,下面就是如何查看Windows端口是否被占用的方法总结 ------------ ...

  10. 利用docker部署elk交换机日志分析

    今天我们来聊一下利用docker部署elk日志分析系统,这里解析一下elk是啥东西.elk分别是Elasticsearch,Logstash和Kibana的首字母缩写. Elasticsearch是一 ...