vue.js实现插入数值与表达式的方法分析
更新时间：2018年07月06日 11:01:32 作者：-老K-
这篇文章主要介绍了vue.js实现插入数值与表达式的方法,结合实例形式分析了vue.js常见的3种插入数值实现方式,并总结了vue.js插值与表达式相关使用技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
使用Vue3和Plotly.js打造一个3D图在线展示的实现步骤
三维网格图广泛应用于科学可视化、医学成像、工程设计等领域,用于展示复杂的数据结构和空间分布,本文给大家介绍了使用Vue3和Plotly.js打造一个3D图在线展示的实现步骤,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-07-07
大文件下载,花费的时间比较长,没有任何提示,用户体验很差,需要优化,提示文件在下载中,并且显示进度百分比,下面小编给大家带来了Vue项目实现文件下载进度条功能,感兴趣的朋友一起看看吧2024-03-03
这篇文章主要介绍了vue实现输入框的模糊查询的示例代码（节流函数的应用场景），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要为大家详细介绍了Vue生命周期和数据共享，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
数据的重要性我们大家都知道，就算再小的项目中都可能使用几个图表展示，我最近在做项目的过程中也是需要用到图表，最后选择了echarts图表库，这篇文章主要介绍了Vue使用Echarts画柱状图2022-12-12
众所周知Element是一套Vue.js后台组件库,它能够帮助你更轻松更快速地开发后台项目,下面这篇文章主要给大家介绍了关于使用Element进行前端开发的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue优化之优雅的抛出错误(Error)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要为大家介绍了vue electron实现无边框窗口示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
过滤器(Filters)是 vue 为开发者提供的功能，常用于文本的格式化，这篇文章主要介绍了如何在Vue中定义和调用过滤器,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了vue实现flv格式视频播放,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
最新评论