vue.js实现插入数值与表达式的方法分析


Posted in Javascript onJuly 06, 2018

本文实例讲述了vue.js实现插入数值与表达式的方法。分享给大家供大家参考,具体如下:

vue.js在插入数值的时候有三种方式

1、插入纯文本

插入纯文本是最简单的方式,使用双大括号就能插入想要的值。

<span>{{ msg }}</span>

mustache也可以在属性中使用

<div id="item-{{ id }}"></div>

就能显示所需要显示的文本信息了。但是有时候,我们想要插入的html文本,这时候要怎么办呢?在插入html的时候有两种方式,一种是用三个大括号的形式,这种是在vue.js 1.x 版本时候使用较多,但是在vue.js 2.x 的时候,插入纯文本的时候开始使用v-html的形式。

2、插入html

<span>{{{ msg }}}</span> // vue.js 1.x 版本
<div v-html="msg"></div> // vue.js 2.x版本

被插入的内容都会被当做 HTML —— 数据绑定会被忽略。注意,你不能使用 v-html 来复合局部模板,因为 Vue 不是基于字符串的模板引擎。组件更适合担任 UI 重用与复合的基本单元。此外不建议将用户输入的值直接作为html显示,这样有可能会造成XSS攻击。对用用户输入显示的值一定要做必要的过滤之后才能真正显示。

3、属性

对于双大括号,不能在html属性中使用,对于属性,使用v-bind 来绑定数据。

<div v-bind:id="dynamicId"></div>
<div :id="dynamicId"></div> // 简写形式

附:vue.js插值与表达式示例

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- Vue.js -->
  <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app">
  <!--# 使用大括号(Mustache 语法) “{{ }}”是最基本的文本插值方法,它会自动将我们双向绑定的诗句实时显示出来 #-->
  {{ book }}
</div>
</body>
</html>
<script>
  var myData = {
    book:'《vue.js实战》'
  };
  var app = new Vue({
    el:'#app',
    data:myData
  })
</script>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
基于Jquery的动态创建DOM元素的代码
Dec 28 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
基于javascript实现listbox左右移动
Jan 29 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
详解vue.js全局组件和局部组件
Apr 10 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
详解浏览器缓存和webpack缓存配置
Jul 06 #Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 #Javascript
深入浅析AngularJs模版与v-bind
Jul 06 #Javascript
vue中子组件调用兄弟组件方法
Jul 06 #Javascript
vue中element 上传功能的实现思路
Jul 06 #Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 #Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 #Javascript
You might like
玩转图像函数库―常见图形操作
2006/09/03 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP开发实现快递查询功能详解
2019/04/08 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
简单实现js浮动框
2016/12/13 Javascript
js实现单张图片平移切换效果
2017/10/11 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python list格式数据excel导出方法
2018/10/31 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Python-接口开发入门解析
2019/08/01 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Django values()和value_list()的使用
2020/03/31 Python
在vscode中启动conda虚拟环境的思路详解
2020/12/25 Python
教师队伍管理制度
2014/01/14 职场文书
保护环境倡议书300字
2014/05/19 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
nginx location 带斜杠【 / 】与不带的区别
2022/04/13 Servers