指令速览 · vue3.x -- 系列学习

>[success] # 指令速览案例 [vue3 指令官方文档速览 ](https://cn.vuejs.org/api/built-in-directives.html#v-text) >[danger] ##### 案例 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="app">  <div>{{counter}}</div>  <button @click="addCounter">增加</button>  <div> <span :title="counter">鼠标悬停</span> </div>  <div> {{msg}} <input v-model="msg" /> </div>  <div v-if="flag">显示隐藏</div>  <div v-show="flag">显示隐藏</div>  <ul> <li v-for="todo in todos">{{todo}}</li> </ul> </div>  <script src="https://unpkg.com/vue@next"></script> <script> const handler = { data() { return { counter: 1, msg: '', flag: true, todos: [1, 2, 3, 4, 5], } }, methods: { addCounter() { ++this.counter }, }, } // 创建vue const vm = Vue.createApp(handler) vm.mount('#app') </script> </body> </html> ~~~