Vue，点击文字更换文本

<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.

——~

6683人浏览 · 2022-01-17 19:50:55

——~ · 2022-01-17 19:50:55 发布

<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有问题请留言，共同交流、学习！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^