这次给大家带来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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue中spa单页面应用程序详解
vue-router组件间参数相互传递的方法
以上就是vue的花括号怎么使用的详细内容。