当前位置:主页 > vue.js教程 > 图文讲解vue的v-if使用方法

vue中v-if使用方法详解

发布:2020-03-12 16:08:35 173


为找教程的网友们整理了vue相关的编程文章,网友广暄婷根据主题投稿了本篇教程内容,涉及到vue、v-if、图文讲解vue的v-if使用方法相关内容,已被754网友关注,如果对知识点想更进一步了解可以在下方电子资料中获取。

图文讲解vue的v-if使用方法

vue提供了一个用于判断的v-if 、v-else语法,可以通过v-if和v-else进行内容的显示与隐藏。下面将通过使用v-if、v-else进行数据的显示与隐藏

图文讲解vue的v-if使用方法

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

代码:

<div id="app">

<div>当flage为true时显示</div>

<div>当flage为false时显示</div>

</div>

图文讲解vue的v-if使用方法

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

图文讲解vue的v-if使用方法

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

代码:

<script>

var app = new Vue({

el:"#app"

})

</script>

图文讲解vue的v-if使用方法

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

代码:

data:{

flage:true

}

 

图文讲解vue的v-if使用方法

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

图文讲解vue的v-if使用方法

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

图文讲解vue的v-if使用方法

图文讲解vue的v-if使用方法


参考资料

相关文章

  • 在vue项目中使用layui框架的方法及采坑总结

    发布:2019-09-16

    这篇文章主要介绍了vue使用layui框架,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • Vue动态创建注册component的实例详解

    发布:2019-09-15

    这篇文章主要给大家介绍了关于Vue动态创建注册component的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧


  • 解析Vue2.0基于vue-cli+webpack Vuex的用法

    发布:2020-02-11

    下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 解决Vue Router的懒加载路径的方案

    发布:2019-12-19

    这篇文章主要介绍了Vue Router的懒加载路径的解决方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下


  • 小程序/mpvue中使用flyio发起网络请求的实例

    发布:2019-11-19

    这篇文章主要介绍了在小程序/mpvue中使用flyio发起网络请求的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 总结vue spa应用中的路由缓存问题及解决办法

    发布:2020-02-10

    这篇文章主要介绍了vue spa应用中的路由缓存问题与解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习


  • 如何使用vue源码解析事件机制

    发布:2020-02-11

    这篇文章主要介绍了vue源码解析之事件机制原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue通过style或者class改变样式

    发布:2020-01-20

    这篇文章主要介绍了vue通过style或者class改变样式的实例代码,在文中给大家提到了vue的一些样式(class/style)绑定,需要的朋友可以参考下


网友讨论