vue双花括号的使用
2024-09-06 09:17:49
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>{{}}的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<h1>{{msg}}</h1>
<h4>{{cart.brand}}</h4>
<!--在双花括号中 执行运算表达式 -->
<p> 3 + 5 = {{ 3 + 5 }}</p>
</div>
<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>
<div>
双花括号:执行表达式,将表达式的结果 输出到当前调用的元素的innerHTML中
</div>
<div 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>
</div>
<script>
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
count:3,
totalNum:10,
hasMore:true
}
})
</script>
</body>
</html>
最新文章
- 【技巧】为ComboBox添加自动提示
- Ubuntu架设FTP
- [PHP]Maximum execution time of 30 seconds exceeded
- 报表工具如何实现多次导入Excel
- Hibernate的关联映射
- 【PHP用户的错误日志】
- servlet&jsp高级：第四部分
- css reset及部分layout样式
- LoadRunner 学习笔记（2）VuGen运行时设置Run-Time Setting
- billing是如何的拆分的？
- char *详细指针
- js脚本根据身份证号获取性别、年龄、家庭地址、生日
- CodeForces832-B. Petya and Exam
- linux指令札记
- Spring中的applicationContext.xml实现自动装配
- Hive：动静态分区
- 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
- 「洛谷1884」「USACO12FEB」过度种植【离散化扫描线】
- thinkphp 5.6以上版本出现No input file specified解决办法
- Mac搭建SVN服务器+Cornerstone连接服务器