详解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学习笔记6 prototype的提出
Jan 11 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
兼容主流浏览器的JS复制内容到剪贴板
Dec 12 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
Javascript 正则表达式校验数字的简单实例
Nov 02 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
《javascript少儿编程》location术语总结
May 27 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
javascript showModalDialog模态对话框使用说明
2009/12/31 Javascript
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
jQuery实现form表单序列化转换为json对象功能示例
2018/05/23 jQuery
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
深入解析Python中的上下文管理器
2016/06/28 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
matplotlib常见函数之plt.rcParams、matshow的使用(坐标轴设置)
2021/01/05 Python
营运督导岗位职责
2015/04/10 职场文书
2015年化验室工作总结
2015/04/23 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python