vue学习笔记之指令v-text && v-html && v-bind详解


Posted in Javascript onMay 12, 2017

一 : 指令的概念:

指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能

二 : 指令的语法:

v-指令名 = “表达式判断或者是业务模型中属性名或者事件名”

三 : 具体指令

1. v-text

作用 : 操作元素中的纯文本

快捷方式 : {{}}

栗子1

简写形式:将v-text=""换成{{}}

<div id="app">
 {{ message }}
</div>
var app = new Vue({
  el : '#app',
  data : {
  message : 'hello world'  
 }
})

结果:hello world

栗子2

<h1 id="app1" v-text="'今天是'+year+'年'+month+'月'"></h1>
var app1 = new Vue({
  el : "#app1",
  data : {
    year : new Date().getFullYear(),
    month : new Date().getMonth()+1
  }
})

结果:今天是2017年5月

等同于:<h1 id="app1">今天是{{year}}年{{month}}月</h1>

  1. 这里v-text="",双引号并不是代表字符串,而是vue自定义的划定界限的符号。如果我们里边输出字符串,就要在里边再添加一对单引号。而且经测验,要想输出字符串,必须添加单引号,否则会报错
  2. 这里month默认是从0开始的,所以我们要+1
  3. 这里{{}}代表的就是"",所以在v-text=""中,我们在内容里边就不需要再写{{}}了,直接写data值就行

栗子3

<div id='app'>
  <h1>{{ message }}</h1>
  <h1>{{ message.concat('!!!') }}</h1>
  <h1>{{ message? 'has message' : 'no message' }}</h1>
  下面这两个语句报错
  <h1>{{ var message = 'message' }}</h1>
  <h1>{{ if(message){return info} }}</h1>  
</div>
var app = new Vue({
  el : '#app',  // 绑定了上边的id='app'的元素
  data : {
    message : 'hello'
  }  
})

结果:

  hello
  hello!!!
  has message

第四五句报错

大胡子{{}}里边支持表达式

但不是所有的表达式都能放在里边,只有单个语句的可以,像var和if就不可以

如果想使用if语句的话,用三元运算符代替

栗子4

可以采用对象的形式传递多个数据

<div id="app2">
  <p>姓名 : {{ person.name }}</p>
  <p>性别 : {{ person.sex }}</p>
  <p>年龄 : {{ person.age }}</p>
</div>
var app2 = new Vue({
  el : "#app2",
  data : {
    person : {
      name : '小明',
      sex : '男',
      age : 8
    }
  }
})

结果:

 姓名 : 小明
 性别 : 男
 年龄 : 8

vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解

2. v-html

作用 : 操作元素中的HTML标签

v-text会将元素当成纯文本输出,v-html会将元素当成HTML标签解析后输出

栗子1

<div id="app3">
  {{ message }}
</div>
var app3 = new Vue({
  el : "#app3",
  data : {
    message : "![](img/1.jpg)"
  }
})

由此可见:{{}}/v-text不能解析html元素,只会照样输出

栗子2

<div id="app3" v-html="message"></div>
var app3 = new Vue({
  el : "#app3",
  data : {
    message : "![](img/1.jpg)"
  }
})

结果 : 成功显示图片

vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解

3. v-bind

作用 : 绑定标签属性,:后面是标签属性名

栗子1

<div id="app">
  <a href="" v-bind:href=" rel="external nofollow" hrefvalue">
    ![](source)
  </a>
</div>
var app = new Vue({
  el : "#app",
  data : {
    hrefvalue : 'http://www.baidu.com',
    source : 'img/1.jpg'
  }
})

vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解

栗子2

<div id="app2">
  <span v-bind:title = 'message'>
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>
var app2 = new Vue({
  el : '#app2',
  data : {
    message : '页面加载于' + new Date()
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
firefox下frameset取不到值的解决方法
Sep 06 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
Jan 12 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
JS常用正则表达式总结【经典】
May 12 #Javascript
vue.js的安装方法
May 12 #Javascript
JS匹配日期和时间的正则表达式示例
May 12 #Javascript
js如何获取网页所有图片
May 12 #Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 #Javascript
jQuery手风琴的简单制作
May 12 #jQuery
jQuery.ajax向后台传递数组问题的解决方法
May 12 #jQuery
You might like
一家之言的经验之谈php+mysql扎实个人基本功
2008/03/27 PHP
php修改时间格式的代码
2011/05/29 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
2009/07/19 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Angularjs实现搜索关键字高亮显示效果
2017/01/17 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
vue 实现强制类型转换 数字类型转为字符串
2019/11/07 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
Python3.5基础之函数的定义与使用实例详解【参数、作用域、递归、重载等】
2019/04/26 Python
python函数与方法的区别总结
2019/06/23 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Python猜数字算法题详解
2020/03/01 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
文员岗位职责
2013/11/09 职场文书
办公室内勤工作职责
2013/12/11 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2015年幼儿园中班开学寄语
2015/05/27 职场文书
学术研讨会主持词
2015/07/04 职场文书
公司车辆维修管理制度
2015/08/05 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang