10.vue指令6

内容指令-v-on-调用传参作用传自定义参数步骤第一步在第一个加入形参如price随后在函数中加入参数methods:{buy (price){this.monney -price}}加入标签属性在函数buy里加入参数button clickbuy(10)阿萨姆/button加入被执行标签div idapp button clickbuy(10)阿萨姆/button button clickbuy(5)ad钙奶/button p银行卡余额 {{money}}元/p /div补充添加边框1.手动添加syle属性!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/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 /head2.添加盒子div classbox效果代码!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/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 idapp div classbox h3小杜自动售货机/h3 button clickbuy(10)阿萨姆/button button clickbuy(5)ad钙奶/button /div p银行卡余额 {{money}}元/p /div script srchttps://cdn.jsdelivr.net/npm/vue2/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否则无法使用如下正确数种