详解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 相关文章推荐
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
JavaScript参数个数可变的函数举例说明
Oct 10 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
Jan 06 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
VsCode插件整理(小结)
Sep 14 Javascript
JavaScript设计模式之建造者模式实例教程
Jul 02 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
详解 TypeScript 枚举类型
Nov 02 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
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
Jquery $when done then的用法详解
2016/05/20 Javascript
使用RequireJS库加载JavaScript模块的实例教程
2016/06/06 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
Python之用户输入的实例
2018/06/22 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
详解Python locals()的陷阱
2019/03/26 Python
斯德哥尔摩通票:Stockholm Pass
2018/01/09 全球购物
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
课堂打架检讨书200字
2014/11/21 职场文书
撤诉申请怎么写
2015/05/19 职场文书
重阳节简报
2015/07/20 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android