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


Posted in Javascript onOctober 18, 2020

背景分析

在传统的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 插值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
js和jquery中获取非行间样式
May 05 jQuery
详解node HTTP请求客户端 - Request
May 05 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
node中的密码安全(加密)
Sep 17 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
vue自定义树状结构图的实现方法
Oct 18 #Javascript
axios封装与传参示例详解
Oct 18 #Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 #Javascript
js中复选框的取值及赋值示例详解
Oct 18 #Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 #Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 #Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 #Javascript
You might like
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
JavaScript解析URL参数示例代码
2013/08/12 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python partial函数原理及用法解析
2019/12/11 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Python ORM编程基础示例
2020/02/02 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
如何通过命令行进入python
2020/07/06 Python
幼教毕业生自我鉴定
2014/01/12 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
试用期辞职信范文
2015/03/02 职场文书
军事博物馆观后感
2015/06/05 职场文书
父亲节感言
2015/08/03 职场文书