内容
指令-v-on-调用传参
作用
传自定义参数
步骤
- 第一步在第一个（）加入形参（如price）
- 随后在函数中加入参数
methods:{buy (price){this.monney -=price}}- 加入标签属性
在函数buy里加入（参数）
<button @click="buy(10)">阿萨姆</button>加入被执行标签
<div id="app"> <button @click="buy(10)">阿萨姆</button> <button @click="buy(5)">ad钙奶</button> <p>银行卡余额： {{money}}元</p> </div>补充
添加边框
1.手动添加syle属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { border: 3px solid #333; /* 黑色实线边框，粗细 3px */ padding: 20px; /* 内边距，让文字不贴边 */ border-radius: 12px; /* 圆角，更美观 */ display: inline-block; /* 宽度根据内容自适应 */ background-color: #f5f5f5; /* 浅灰色背景，突出显示 */ } button { margin: 5px; padding: 6px 14px; cursor: pointer; } p { font-size: 18px; font-weight: bold; } </style> </head> </head>- 2.添加盒子
<div class="box">效果
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { border: 3px solid #333; /* 黑色实线边框，粗细 3px */ padding: 20px; /* 内边距，让文字不贴边 */ border-radius: 12px; /* 圆角，更美观 */ display: inline-block; /* 宽度根据内容自适应 */ background-color: #f5f5f5; /* 浅灰色背景，突出显示 */ } button { margin: 5px; padding: 6px 14px; cursor: pointer; } p { font-size: 18px; font-weight: bold; } </style> </head> </head> <body> <!-- 创建 --> <div id="app"> <div class="box"> <h3>小杜自动售货机</h3> <button @click="buy(10)">阿萨姆</button> <button @click="buy(5)">ad钙奶</button> </div> <p>银行卡余额： {{money}}元</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { money: 100 }, methods:{buy (price){ this.money -= price}} }); </script> </body> </html>注意
小心标签格式，正确使用标签开<div>闭</div>，否则无法使用（如下）
- 正确（数种）
![[具身智能-806]：全自主移动机器人完整链路解析：从AI导航决策到机械运动落地的分层工作原理。](http://pic.xiahunao.cn/yaotu/[具身智能-806]：全自主移动机器人完整链路解析：从AI导航决策到机械运动落地的分层工作原理。)
