详解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 相关文章推荐
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
Dec 06 Javascript
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
验证码按回车不变解决方法
Mar 29 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
javascript生成随机颜色示例代码
May 05 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
angular 未登录状态拦截路由跳转的方法
Oct 09 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
简单了解JavaScript作用域
Jul 31 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伪造referer实例代码
2008/09/20 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
AngularJS内置指令
2015/02/04 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
Node.js学习入门
2017/01/03 Javascript
微信小程序 实战实例开发流程详细介绍
2017/01/05 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
node实现登录图片验证码的示例代码
2018/04/20 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python队列通信:rabbitMQ的使用(实例讲解)
2017/12/22 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python实现泊松图像融合
2018/07/26 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
python 基于opencv实现图像增强
2020/12/23 Python
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
开放系统互连参考模型
2016/06/29 面试题
中药学专业毕业生推荐信
2014/07/10 职场文书
义诊活动总结
2015/02/04 职场文书
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL