Detailed explanation of interpolation of Interpolation syntax in VUE

  • 2021-08-31 07:08:02
  • OfStack

Background analysis

Can we define variables in the traditional html page? Of course not, if we hope to achieve the data operation of page content through variables, it is also not possible. Of course, we can define html tag library on the server side, and then use html as a template, which can also be realized by parsing on the server side, but this must be processed by the server side before it can be achieved. Can it be realized directly in the client html page through one technology?

Interpolation Syntax in VUE

This syntax is to add variables in html, and synchronize with the values of variables in js programs by means of variables, thus simplifying code writing. Its basic syntax is:
< HTML element > {{variable or js expression}} < /HTML Element >

Inside {{}} you can write: variables, arithmetic calculations, 3 items, accessing array elements, creating objects, calling functions, etc. Anything else, as long as there are legal js variables and expressions returned. However, you cannot write program structures (branches and loops) and js expressions without return values.

For example:


<!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> User name :{{username}}</h3>
  <h3> Gender :{{gender==1?" Male ":" Female "}}</h3>
  <h3> Subtotal :¥{{(price*count).toFixed(2)}}</h3>
  <h3> Ordering time : {{new Date(orderTime).toLocaleString()}}</h3>
  <h3> Today is the week {{week[new Date().getDay()]}}</h3>
 </div>
 <script> new Vue({
   el:"#app",
   data:{
    uname:"dingding",
    gender:1,
    price:12.5,
    count:5,
    orderTime:1600228004389,
    week:[" Day ","1","2","3","4","5","6"]
   }
  }) </script>
</body>
</html>

Summary (Summary)

This section analyzes the {{}} syntax in VUE, which facilitates manipulating or synchronizing data in js programs through variables.


Related articles: