详解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 的方法重载效果
Aug 07 Javascript
Extjs中常用表单介绍与应用
Jun 07 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
vue如何实现自定义底部菜单栏
Jul 01 Javascript
使用 Opentype.js 生成字体子集的实例代码详解
May 25 Javascript
Vue实现导航栏菜单
Aug 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
php 文件夹删除、php清除缓存程序
2009/08/25 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
Python实现简单状态框架的方法
2015/03/19 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
Python如何实现转换URL详解
2019/07/02 Python
django获取from表单multiple-select的value和id的方法
2019/07/19 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python函数调用追踪实现代码
2020/11/27 Python
白色公司:The White Company
2017/10/11 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
初入社会应届生求职信
2013/11/18 职场文书
应届大学生自荐信
2013/12/05 职场文书
幼儿园运动会口号
2014/06/07 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
售票员岗位职责
2015/02/15 职场文书
劳动保障个人工作总结
2015/03/04 职场文书
大学生自荐书范文
2015/03/05 职场文书
学校运动会感想
2015/08/10 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL