详解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 插值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

VUE
插值

Vue数据绑定实例写法
在本篇文章里小编给大家整理的是关于Vue数据绑定实例写法以及相关知识点，需要的朋友们学习下。
2019-08-08
Vue warn:Property "state" was accessed during
这篇文章主要为大家介绍了Vue warn:Property "state" was accessed during render的报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
vue使用jsMind思维导图的实战指南
jsMind是一个显示/编辑思维导图的纯javascript类库,其基于 html5的canvas进行设计,这篇文章主要给大家介绍了关于vue使用jsMind思维导图的相关资料,需要的朋友可以参考下
2023-01-01
Vue 2中ref属性的使用方法及注意事项
这篇文章主要给大家介绍了关于Vue 2中ref属性的使用方法及注意事项的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。
2017-06-06
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
这篇文章主要介绍了vue.js 输入框输入值自动过滤特殊字符替换中问标点操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
图文介绍Vue父组件向子组件传值
本文通过实例代码给大家详细分享了Vue父组件向子组件传值的过程以及关键点讲解，一起学习参考下吧。
2018-02-02
vue webpack打包优化操作技巧
webpack是react项目标配的打包工具，和NPM搭配起来使用管理模块实在非常方便。这篇文章主要介绍了webpack打包优化（VUE Project）,需要的朋友可以参考下
2018-02-02
Vue前端vue.config.js简介
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载，本文重点介绍VUE前端vue.config.js简介，感兴趣的朋友跟随小编一起看看吧
2023-01-01
Vue加载读取本地txt/json等文件的实现方式
这篇文章主要介绍了Vue加载读取本地txt/json等文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue elementUI table 自定义表头和行合并的实例代码
这篇文章主要介绍了vue elementUI table 自定义表头和行合并的实例代码，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05

详解VUE中的插值( Interpolation)语法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具