这次给大家带来vue的花括号怎么使用，vue花括号使用的注意事项有哪些，下面就是实战案例，一起来看一下。
<!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>代码：
<!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>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
Atas ialah kandungan terperinci vue的花括号怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Apakah perbezaan antara paparan pangkalan data dan jadual
Bagaimana untuk menyemak status port dengan netstat
apa maksud pm
Bagaimana untuk mengira yuran pengendalian bayaran balik untuk Keretapi 12306
Cara mendaftar untuk Alipay korporat
Apakah maksud syiling MLM? Berapa lama masa yang biasanya diambil untuk runtuh?
Apakah pelayan awan?
Peranan siasatan php
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
