我爱Java系列---【1.Vue的快速入门案例】

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Vue快速入门和插值表达式</title>
 6         <script src="js/vuejs-2.5.16.js"></script>
 7     </head>
 8     <body>
 9         <div id="app" style="text-align: center; ">
10             <tr style="border: 1px,solid,red">
11                 <td>姓名</td>
12                 <td>年龄</td>
13                 <td>性别</td>
14             </tr>
15             <br />
16             <tr style="border: 1px,solid,red">
17                 <td>{{user1.username}}</td>
18                 <td>{{user1.age}}</td>
19                 <td>{{user1.gender}}</td>
20             </tr>
21             
22         </div>
23         <script>
24             
25             new Vue({
26                 el:'#app',//表示当前vue对象接管了div区域
27                 data:{
28                     //message:'hello world'//注意不要写分号结尾
29                     user1:{'username':'小明','age':18,'gender':'男'}
30                 }
31             });
32         </script>
33     </body>
34 </html>
复制代码

 

posted on   少年攻城狮  阅读(297)  评论(0)  编辑  收藏  举报

编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示
AI FOR CODE 大赛