编写字符串反转和内容隐藏功能 · vue笔记

[TOC] >[success] # 编写字符串反转和内容隐藏功能接下来用vue做两个简单的小 **demo** ，为了让初学者更好的理解 **vue** 语法 >[success] ## 字符串反转功能 **需求** ：用 **vue** 实现 **点击按钮** 时， **反转** 文字内容，例如： **123** 点击后反转成 **321** 的这么一个小效果。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>反转字符串</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 创建vue实例 Vue.createApp({ data(){ return{ content: 'hello world' // 定义变量 } }, methods: { handleBtnClick(){ // 反转过后转换成字符串 const newContent = this.content.split('').reverse().join('') // 重新赋值给页面元素 this.content = newContent } }, template: ` <div> {{content}} <button v-on:click="handleBtnClick">反转</button> </div> ` // 在标签中使用变量 }).mount('#root') // 将template中的内容挂载到id为root的元素中 </script> </html> ~~~ >[success] ## 内容隐藏功能 **需求** ：通过 **点击按钮** 实现 **显示隐藏** 文字的 **开关** 的一个小功能。 **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内容隐藏功能</title>  <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // 创建vue实例 Vue.createApp({ data(){ return{ show: true, // 定义变量控制显示隐藏 } }, methods: { handleBtnClick(){ this.show = !this.show } }, template: ` <div> <span v-if="show">hello world</span> <button v-on:click="handleBtnClick">显示/隐藏</button> </div> ` // 在标签中使用变量 }).mount('#root') // 将template中的内容挂载到id为root的元素中 </script> </html> ~~~