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 相关文章推荐
广告显示判断
Aug 31 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
Firefox div高度自适应
Apr 28 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
Dec 13 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 Javascript
详解浏览器缓存和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
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
JavaScript延迟加载
2021/03/09 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
jquery ezUI 双击行记录弹窗查看明细的实现方法
2016/06/01 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
VuePress 静态网站生成方法步骤
2019/02/14 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
Python装饰器基础详解
2016/03/09 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
python 实时得到cpu和内存的使用情况方法
2018/06/11 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
Python中捕获键盘的方式详解
2019/03/28 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
积极分子思想汇报
2014/01/04 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
运动会稿件300字
2014/02/14 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
爱心倡议书范文
2014/05/12 职场文书
护士个人总结范文
2015/02/13 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js
Redis主从复制操作和配置详情
2022/09/23 Redis