Vue，点击文字更换文本

最新推荐文章于 2024-11-03 19:04:31 发布

——~

最新推荐文章于 2024-11-03 19:04:31 发布

阅读量6.7k

点赞数 4

文章标签： vue.js elementui javascript 前端前端框架

本文链接：https://blog.csdn.net/qq_51701698/article/details/122546533

版权

<body>
    <div id="app">
        <button @click="add=!add,edd=!edd">
            <p v-if="add">今天天气很热</p>
            <p v-if="edd">今天天气很冷</p>
        </button>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
        new Vue({
            el:'#app',//管理 id=app 的元素
            data:{        //代表存放自定义的数据
                add:true,//代表add显示
                edd:false//代表edd不显示
            }
        })
    </script>
</body>

效果图如下：点击前

点击后：

在body中写div块，在div中添加一个按钮button（也可以用其他标签）、给button中添加点击事件——@click，add=!add表示add取反(edd相同)，在按钮中写入两个p标签并加入文字，p标签中需要加入条件指令：v-if（根据条件来加载元素），最后在下方的script中写入条件。

vue手册：https://cn.vuejs.org/v2/guide/#%E6%9D%A1%E4%BB%B6%E4%B8%8E%E5%BE%AA%E7%8E%AF有问题请留言，共同交流、学习！