记录一次v-if画面元素不能切换显示

最新推荐文章于 2023-02-04 22:05:07 发布

Hello Momo?

最新推荐文章于 2023-02-04 22:05:07 发布

阅读量603

点赞数

分类专栏： vue 文章标签： vue html js

本文链接：https://blog.csdn.net/hello_momo/article/details/106134673

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录v-if 切换元素显示不显示
最开始flg可以切换true和false，但是页面元素不会消失。
原因：methods方法名写错了
学完ES6以后，方法名写成了changeisflg：() => {。。。。。。。}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   <div id="app">
       <h1 v-if="isflg">这是用v-if控制的元素</h1>
       <input type="button" value="isflg" @click="changeisflg">
       <input type="button" value="切换flag" @click="isflg = !isflg">
       <h1 style="background-color: rebeccapurple;" v-if="buttonid == 'el01'">这是一个h1</h1>
       <h2 style="background-color: yellowgreen;" v-else-if=" buttonid == 'el02'">这是一个h2</h2>
       <h3 style="background-color: burlywood;" v-else>这是一个h3</h3>
       <input type="button" value="el01" @click="changeid1">
       <input type="button" value="el02" @click="changeid2">
       <input type="button" value="el03" @click="changeid3">
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
       var app = new Vue({
           el: "#app",
           data: {
               msg: "hello momo",
               isflg: true,
               buttonid: "el00"
           },
           methods: {
               changeisflg(){
                   this.isflg = !this.isflg
               },
               changeid1(){
                   this.buttonid = "el01"
               },
               changeid2(){
                   this.buttonid = "el02"
               },
               changeid3(){
                   this.buttonid = "el03"
               }
           }
       })
   </script>
</body>
</html>

Hello Momo?

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
记录一次v-if画面元素不能切换显示

记录v-if 切换元素显示不显示最开始flg可以切换true和false，但是页面元素不会消失。原因：methods方法名写错了学完ES6以后，方法名写成了changeisflg：() => {。。。。。。。}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
复制链接

扫一扫

专栏目录