详解VUE中的插值( Interpolation)语法

 更新时间:2020-10-18 12:16:30   作者:佚名   我要评论(0)

背景分析
在传统的html页面中我们可以定义变量吗?当然不可以,那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的。当然我们可以在服务端通过定义ht

背景分析

在传统的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 插值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • 简单了解vue 插值表达式Mustache
  • Vue插值、表达式、分隔符、指令知识小结
  • Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
  • vue 插值 v-once,v-text, v-html详解
  • web前端vue实现插值文本和输出原始html
  • vue模板语法-插值详解

相关文章

  • 详解VUE中的插值( Interpolation)语法

    详解VUE中的插值( Interpolation)语法

    背景分析 在传统的html页面中我们可以定义变量吗?当然不可以,那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的。当然我们可以在服务端通过定义ht
    2020-10-18
  • 你所不知道的Spring自动注入详解

    你所不知道的Spring自动注入详解

    自动注入和@Autowire @Autowire不属于自动注入! 注入方式(重要) 在Spring官网上(文档),定义了在Spring中的注入方式一共有两种:set方法和构造函数。 也就是说
    2020-10-18
  • Anaconda+spyder+pycharm的pytorch配置详解(GPU)

    Anaconda+spyder+pycharm的pytorch配置详解(GPU)

    第一步 : 从清华大学开源软件镜像站下载Anaconda:https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/&#63;C=M&O=D 安装过程中需要勾选如下图 装
    2020-10-18
  • Android Studio配置(Android Studio4.1为例)

    Android Studio配置(Android Studio4.1为例)

    Android Studio下载(下文统称AS) AS最新版下载请戳:AS下载 Android SDK下载 SDK安装器下载 SDK安装器下载请戳:SDK下载 然后根据你的电脑选择合适版本
    2020-10-18
  • mysql对于模糊查询like的一些汇总

    mysql对于模糊查询like的一些汇总

    1、常见用法: (1)搭配%使用 %代表一个或多个字符的通配符,譬如查询字段name中以大开头的数据: (2)搭配_使用 _代表仅仅一个字符的通配符,把上面那条查询语句
    2020-10-18
  • 如何搭建一个完整的Vue3.0+ts的项目步骤

    如何搭建一个完整的Vue3.0+ts的项目步骤

    相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正式版本)。所以Vue3.0的
    2020-10-18
  • Android studio 4.1打包失败和插件错误提示的解决

    Android studio 4.1打包失败和插件错误提示的解决

    一、Android studio 升级4.1,Android Gradle插件从4.0.2升级到4.1.0后打包失败,回退到4.0.2后打包正常。 错误信息: &#8226;What went wrong: Execution fa
    2020-10-18
  • AndroidStudio升级4.1坑(无法启动、插件plugin不好用、代码不高亮)

    AndroidStudio升级4.1坑(无法启动、插件plugin不好用、代码不高亮)

    上班坐稳,打开AS看到studio有更新,于是就点击升级,4.1版本,看更新日志:bug修复什么什么一大堆,感觉挺好的,应该做了不少优化,结果升级完后就无法启动了,于是
    2020-10-18
  • Nginx代理同域名前后端分离项目的完整步骤

    Nginx代理同域名前后端分离项目的完整步骤

    前后端分离项目,前后端共用一个域名。通过域名后的 url 前缀来区别前后端项目。 以 vue + php 项目为例。直接上 server 模块的 nginx 配置。 server { listen
    2020-10-18
  • Python中Yield的基本用法

    Python中Yield的基本用法

    带有yield的函数在Python中被称之为generator(生成器),也就是说,当你调用这个函数的时候,函数内部的代码并不立即执行 ,这个函数只是返回一个生成器(Generator I
    2020-10-18

最新评论