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 04 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
Nov 21 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
JS将光标聚焦在文本最后的实现代码
Mar 28 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
vue-router单页面路由
Jun 17 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
uni-app 支持多端第三方地图定位的方法
Jan 03 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
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
Thinkphp5结合layer弹窗定制操作结果页面
2017/07/07 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
js实现返回顶部效果
2017/03/10 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
JavaScript前端开发时数值运算的小技巧
2020/07/28 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Tensorflow实现AlexNet卷积神经网络及运算时间评测
2018/05/24 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
解析HTML5的存储功能和web SQL的相关操作方法
2016/02/19 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
大学生工作自荐书
2014/06/16 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript