详解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脚本代码跑起来。
Jan 09 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
webpack入门必知必会
Jan 16 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
js实现有趣的倒计时效果
Jan 19 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
多文件上传的例子
2006/10/09 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
js 获取当前web应用的上下文路径实现方法
2016/08/19 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
vue better-scroll插件使用详解
2018/01/25 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
分析python服务器拒绝服务攻击代码
2014/01/16 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
用Python读取几十万行文本数据
2018/12/24 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
美国旅游网站:Tours4Fun
2017/02/17 全球购物
党校培训自我鉴定范文
2014/04/10 职场文书
《厄运打不垮的信念》教学反思
2014/04/13 职场文书
水利局群众路线专题民主生活会发言材料
2014/09/21 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
水电工程师岗位职责
2015/02/13 职场文书
golang中的空接口使用详解
2021/03/30 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技