Vue3實現字串反轉和內容隱藏
阿新 • • 發佈：2021-08-24
經過一週時間的努力，小編今天繼續和大家學習Vue3，今天還是以實際例子為主，先讓小小白感受一下Vue的魅力，讓另外一些小小白體會一下不用腳手架是一種什麼體驗，當然了，也為了接下來的工作內容準備準備。
上一篇關於Vue的文章，通過Vue，實現了一個累加的功能。原始碼是這樣的
<!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> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> <script> Vue.createApp({ data(){return { content: 1 // 繫結的資料 } }, mounted(){ // 頁面渲染之後，自動執行的函式 setInterval(() => { this.content += 1 },1000) }, template:'<div>{{ content }}</div>' // 模版 }).mount('#root') // 掛在點為id="root"的DOM節點 </script> </body> </html>
下面我們來看看今天的第一個例子：字串反轉，先看原始碼：為了節省空間，我這裡就只粘js部分的程式碼
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')
沒接觸過Vue的小夥伴，看到這串字母可能是一臉懵圈，那就跟小編，一起搭上Vue這趟車吧上面的程式碼實現的功能就是將字串反轉反轉再反轉，下面小編就結合註釋一起說明一下程式碼的作用
Vue.createApp({ data(){ return { content: "hello world" } }, methods:{ // 之前jQuery更多的是操作DOM，使用Vue的時候要向操作資料轉換，剩下的事情Vue會幫我們處理好 handleBtnClick(){ const newContent = this.content.split("").reverse().join('') this.content = newContent } }, template:` // es6新增加模版字串，支援${}的語法 <div> {{ content }} // 繫結的資料 // 在Vue中使用v-on來繫結，可以通過@click的方式簡寫 <button v-on:click="handleBtnClick">反轉</button> </div>` }).mount('#root')
例子二——內容隱藏。這個例子小編就直接結合註釋一起梳理
Vue.createApp({ data(){ return { show:true } }, methods:{ handleBtnClick(){ // 操作資料，在點選按鈕執行這個函式的時候，show這變數的值就是false true false true ... // 相應的頁面上元素就顯示 不顯示 顯示 不顯示 ... this.show = !this.show } }, template:` <div> // v-if在Vue中叫指令，後面的內容為true的時候，現在對應標籤的內容，為false的時候不顯示 // 和v-if類似的還有v-show。但是v-show只是通過css中的display來處理 // v-if="false"的時候是直接不渲染DOM // v-show="false"的時候，渲染DOM元素，只是新增樣式display:none // 上面這個是高頻出現的面試題，快拿小本本記上 <span v-if="show">hello world</span> <button v-on:click="handleBtnClick">顯示/隱藏</button> </div>` }).mount('#root')
又是前端進步的一天，一起加油！
大家還可以掃描二維碼，關注我的微信公眾號，蝸牛全棧