当前位置：首页 > news >正文

10.vue指令6

news 2026/8/15 9:18:03

内容

指令-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>