详解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 相关文章推荐
JS文本框不能输入空格验证方法
Mar 19 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
react-native-fs实现文件下载、文本存储的示例代码
Sep 22 Javascript
JavaScript递归函数定义与用法实例分析
Jan 24 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 Javascript
JavaScript实现两个数组的交集
Mar 25 Javascript
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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
Javascript实现视频轮播在pc端与移动端均可
2013/09/29 Javascript
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
[42:00]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第一场 12.13
2020/12/17 DOTA
python分析nignx访问日志脚本分享
2015/02/26 Python
详解Python_shutil模块
2019/03/15 Python
python3 logging日志封装实例
2020/04/08 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
会计专业毕业生自我评价
2013/09/25 职场文书
环境保护标语
2014/06/20 职场文书
超市创业计划书
2014/09/15 职场文书
公司员工体检通知
2015/04/21 职场文书
繁星春水读书笔记
2015/06/30 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android