详解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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
理解JavaScript事件对象
Jan 25 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
js实现常见的工具条效果
Mar 02 Javascript
使用vue-resource进行数据交互的实例
Sep 02 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
Vue中的scoped实现原理及穿透方法
May 15 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
es6 filter() 数组过滤方法总结
Apr 03 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作的文本留言本的例子(六)
2006/10/09 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
PHP中数据类型转换的三种方式
2015/04/02 PHP
PHP生成唯一订单号
2015/07/05 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
通过命令行创建vue项目的方法
2017/07/20 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
nodeJS微信分享
2017/12/20 NodeJs
vue-router 组件复用问题详解
2018/01/22 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
浅析python的优势和不足之处
2018/11/20 Python
python获取Linux发行版名称
2019/08/30 Python
Python根据服务获取端口号的方法
2019/09/25 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
公司前台辞职报告
2014/01/19 职场文书
电子信息工程专业推荐信
2014/02/14 职场文书
党的生日演讲稿
2014/09/10 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
钢琴师观后感
2015/06/12 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle