最新公告
  • 欢迎您光临AA分享网,一个高级程序员的学习、分享的分享平台!立即加入我们
  • vue.js怎么使用v-if

    本文环境:windows7、vue2.9.6,该方法适用于所有品牌的电脑。

    vue.js使用v-if的方法:

    1、新建一个html页面,然后创建一个div设置id为app,然后在这个div里面创建两个div,同时给这两个div设置不同的文本。

    代码:

    <div id="app">
     
    <div>当flage为true时显示</div>
     
    <div>当flage为false时显示</div>
     
    </div>

    c05bc94a7eca06be74e4eac04889020.png

    2、引入vue.js。在body结束标签前面使用引入vue.js文件。

    0892079b9f6c474e5796ba5596b4ac7.png

    3、创建vue挂载点。在vue.js引入文件后面新建一个<sctipt>标签,然后使用new Vue()创建挂载点。

    代码:

    <script>
     
    var app = new Vue({
     
    el:"#app"
     
    })
     
    </script>

    ac18da6df550ca3a8c7ffad8b0b5227.png

    4、添加用于v-ifv-esle判断的falge数据。使用vue提供的data对flage设置值为true。

    代码:

    data:{
     
    flage:true
     
    }

    df01dfed2e79865486badbae933daac.png

    5、保存html后使用浏览器打开,即可看到v-if设置为true是的数据。

    f3c2b99b56f6606f0a65d6a8b9013db.png

    6、回到html代码页面,把flage修改为false,保存后刷新页面,会看到显示的内容为v-else的。

    a43c2e48a380505ee2fb4a45fb56d56.png

    以上就是vue.js怎么使用v-if的详细内容,更多请关注其它相关文章!

    AA分享网一个高级程序员的学习、分享的IT资源分享平台
    AA分享网-企业网站源码-PHP源码-网站模板-视频教程-IT技术教程 » vue.js怎么使用v-if
    • 257会员总数(位)
    • 5903资源总数(个)
    • 14本周发布(个)
    • 6 今日发布(个)
    • 540稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情