乐趣区

关于vue.js:Vue3实现字符串反转和内容隐藏

jiezi

通过一周工夫的致力，小编明天持续和大家学习 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')

又是前端提高的一天，一起加油！
大家还能够扫描二维码，关注我的微信公众号，蜗牛全栈

退出移动版