内容
-指令-v-on-01-语法1-内联语句
输入
v-on:事件名="内联语句"
简便:@事件名
<button v-on:click="count--"></button> <span>{{ count }}</span> <button v-on:click="count++"></button><button @:click="count--">-</button> <span>{{ count }}</span> <button @:click="count++">+</button>注意
中间要插入数据，否则+-
- 正确
- <span>是横向
- 内联语句后加内容（标签中间）
否则无呈现
显示
总结
<!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> </head> <body> <!-- 创建 --> <div id="app"> <button @click="count--">-</button> <span>{{ count }}</span> <button @click="count++">+</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script> const app = new Vue({ el:'#app', data:{ count:0 } }) </script> </body> </html>
