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 相关文章推荐
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
用客户端js实现带省略号的分页
Apr 27 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
MongoDB在PHP中的常用操作小结
2014/02/20 PHP
php将html转成wml的WAP标记语言实例
2015/07/08 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
使用Laravel中的查询构造器实现增删改查功能
2019/09/03 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
JavaScript中eval函数的问题
2016/01/31 Javascript
基于gulp合并压缩Seajs模块的方式说明
2016/06/14 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
2017/12/15 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python实现telnet服务器的方法
2015/07/10 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
公务员个人考察材料
2014/12/23 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书