Comment utiliser les accolades dans Vue-js tutoriel-php.cn

Comment utiliser les accolades dans Vue

php中世界最好的语言

Libérer： 2018-04-14 17:37:29

original

5640 Les gens l'ont consulté

Cette fois, je vais vous montrer comment utiliser les accolades de vue. Quelles sont les précautions pour utiliser les accolades de vue Voici des cas pratiques. regarder. .

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>{{}}的使用</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
  <h1>{{msg}}</h1>
  <h4>{{cart.brand}}</h4>
 <!--在双花括号中 执行运算表达式 -->
 <p> 3 + 5 = {{ 3 + 5 }}</p>
 </p>
 <script>
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs",
    cart:{
     brand:"Volvo",price:30
    }
   }
  })
 </script>
 </body>
</html>

Copier après la connexion

Code :

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>双花括号的练习</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p>
 双花括号:执行表达式,将表达式的结果 输出到当前调用的元素的innerHTML中
 </p>
 <p id="container">{{msg}}
  <h4>三目运算3>5:{{3>5?"对":"错"}}</h4>
  <h4>逻辑运算3>5 && 2>1:{{3>5 && 2>1}}</h4>
  <h4>{{!hasMore}}</h4>
  <h4>{{totalNum>count?"大于":"小于"}}</h4>
 </p>
 <script>
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs",
    count:3,
    totalNum:10,
    hasMore:true
   }
  })
 </script>
 </body>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Explication détaillée de l'application SPA d'une seule page dans vue

Paramètres transmis entre les composants vue-router Méthode

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!