详解VUE中的插值( Interpolation)语法
更新时间：2020年10月18日 11:28:11 作者：龚生
这篇文章主要介绍了详解VUE中的插值( Interpolation)语法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
背景分析
在传统的html页面中我们可以定义变量吗？当然不可以，那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的。当然我们可以在服务端通过定义html标签库方式，然后以html作为模板，在服务端解析也可以实现，但这样必须通过服务端进行处理，才可以做到，能不能通过一种技术直接在客户端html页面中实现呢？
VUE中的插值语法
这种语法是为了在html中添加变量，借助变量方式与js程序中的变量值进行同步，进而简化代码编写。其基本语法为：
<HTML元素>{{变量或js表达式}}</HTML元素>
在{{}}内部可以写:变量、算术计算、 三目、 访问数组元素、 创建对象、调用函数等，总之只要有返回的合法的js变量和表达式都行。但是不可以写程序结构(分支和循环)以及没有返回值的js表达式。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>用户名:{{username}}</h3>
<h3>性别:{{gender==1?"男":"女"}}</h3>
<h3>小计:¥{{(price*count).toFixed(2)}}</h3>
<h3>下单时间: {{new Date(orderTime).toLocaleString()}}</h3>
<h3>今天星期{{week[new Date().getDay()]}}</h3>
</div>
<script> new Vue({
el:"#app",
data:{
uname:"dingding",
gender:1,
price:12.5,
count:5,
orderTime:1600228004389,
week:["日","一","二","三","四","五","六"]
}
}) </script>
</body>
</html>
总结(Summary)
本小节对VUE中{{}}语法进行了分析，通过这种语法，为以通过变量方式操作或同步js程序中的数据，提供了便利。
到此这篇关于详解VUE中的插值( Interpolation)语法的文章就介绍到这了,更多相关VUE 插值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
el-table 树形数据 tree-props 多层级使用避坑
本文主要介绍了el-table 树形数据 tree-props 多层级使用避坑,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
Monaco-editor 的 JSON Schema 配置及使用介绍
这篇文章主要为大家介绍了Monaco-editor 的 JSON Schema 配置及使用介绍，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了vue封装swiper代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要为大家介绍了Vue中使用Swiper简单封装组件示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要为大家详细介绍了基于Vuejs实现购物车功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
这篇文章主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-05
当我们在开发一个大型的前端应用时,动态路由权限是一个必不可少的功能,本文将介绍如何使用Vue 3和TypeScript来实现动态路由权限,希望对大家有所帮助2024-01-01
这篇文章主要为大家详细介绍了vue如何实现将一维数组变换为三维数组,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
这篇文章主要介绍了vue组件详解之使用slot分发内容及Vue组件中slot的用法,需要的朋友可以参考下2018-04-04
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下2022-06-06
最新评论