个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 29 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章详解VUE中的插值( Interpolation)语法由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

背景分析 。

在传统的html页面中我们可以定义变量吗？当然不可以，那我们假如希望通过变量的方式实现页面内容的数据操作也是不可以的。当然我们可以在服务端通过定义html标签库方式，然后以html作为模板，在服务端解析也可以实现，但这样必须通过服务端进行处理，才可以做到，能不能通过一种技术直接在客户端html页面中实现呢?

VUE中的插值语法 。

这种语法是为了在html中添加变量，借助变量方式与js程序中的变量值进行同步，进而简化代码编写。其基本语法为： <HTML元素>{{变量或js表达式}}</HTML元素> 。

在{{}}内部可以写:变量、算术计算、 三目、 访问数组元素、 创建对象、调用函数等，总之只要有返回的合法的js变量和表达式都行。但是不可以写程序结构(分支和循环)以及没有返回值的js表达式.

例如:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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 插值内容请搜索我以前的文章或继续浏览下面的相关文章希望大家以后多多支持我！ 。

原文链接：https://segmentfault.com/a/1190000037511332 。

最后此篇关于详解VUE中的插值( Interpolation)语法的文章就讲到这里了,如果你想了解更多关于详解VUE中的插值( Interpolation)语法的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

29 4 0
文章推荐： linux环境中没有网络怎么下载python
文章推荐： 幕布APP五周年庆典免费领30-90天会员
文章推荐： 中国移动和粉俱乐部免费领取400M全国流量
文章推荐： vue自定义树状结构图的实现方法
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com