[Vue] 2. 字符串反转和内容隐藏 v-if

最新推荐文章于 2023-05-14 17:17:40 发布

weiweicn!

最新推荐文章于 2023-05-14 17:17:40 发布

阅读量471

点赞数

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u014627255/article/details/124927823

版权

Vue.js 字符串反转内容显示隐藏事件绑定数据驱动

关键词由CSDN通过智能技术生成

Vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

一、字符串反转：实现点击按钮后，字符串反过来显示

写按钮，并绑定事件方法：v-on（绑定一个事件）：click（绑定的是click事件）

<button v-on::click="handleBtnClick">反转</button>

定义点击事件函数：

methods: {
                handleBtnClick() {
                    this.content = this.content.split('').reverse().join('')
                }
            },

完整代码如下：

<!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>2</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        Vue.createApp({
            data() {
                return {
                    content: 'hello world'
                }
            },
            methods: {
                handleBtnClick() {
                    this.content = this.content.split('').reverse().join('')
                }
            },
            template: `
            <div>
                {{content}}
                <button v-on:click="handleBtnClick">反转</button>
            </div>
            `
        }).mount('#root')
    </script>
</body>
</html>

在这里插入图片描述

二、点击按钮后可展示或隐藏页面内容

增加一个数据变量：show

data() {
                return {
                    show: true
                }
            },

给内容绑定v-if属性，用于控制显隐

<span v-if="show">hello world</span>

改点击事件内容

methods: {
                handleBtnClick() {
                    this.show = !this.show;
                }
            },

完整代码如下：

<!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>2</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        
        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')
    </script>
</body>
</html>