详解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 相关文章推荐
一个简单的js鼠标划过切换效果
Jun 30 Javascript
javaScript 计算两个日期的天数相差(示例代码)
Dec 27 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
vue项目中v-model父子组件通信的实现详解
Dec 10 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
Javascript查看大图功能代码实现
May 07 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
JavaScript实现缓动动画
Nov 25 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中文件上传的一个问题
2010/09/04 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
Python中实现switch功能实例解析
2018/01/11 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
Python反转序列的方法实例分析
2018/03/21 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
pygame实现非图片按钮效果
2019/10/29 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
HTML5 微格式和相关的属性名称
2010/02/10 HTML / CSS
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
this关键字的作用
2016/01/30 面试题
质检的岗位职责
2013/11/17 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
三方合作协议书范本
2014/04/18 职场文书
社会实践活动总结报告
2014/04/29 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
小学安全工作汇报材料
2014/08/19 职场文书
学校师德师风整改措施
2014/10/27 职场文书
个人汇报材料范文
2014/12/30 职场文书
小学生通知书评语
2014/12/31 职场文书