Vue：Vue基础知识之利用v-if、v-else语句控制页面文本内容的改变

最新推荐文章于 2023-01-09 20:26:18 发布

听雪闻歌

最新推荐文章于 2023-01-09 20:26:18 发布

阅读量8k

点赞数 3

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_42229253/article/details/81265079

版权

VUE 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Vue：Vue基础知识之利用v-if、v-else语句控制页面文本内容的改变

1、v-if、v-else判断语句实例

v-if='isLogin' //类似 if else
v-else
v-if:是vue 的一个内部指令，指令用在我们的html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

1、index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js实例</title>
</head>
<body>
    <h1>Vue2.0实例</h1>
    <hr>
    <ol>
        <li><a href='./example/helloword.html'>Hello World实例</a></li>
        <li><a href='./example/v-if.html'>v-if&v-else&v-show</a></li>
    </ol>
    
</body>
</html>

2、v-if.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HelloWorld</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type='text/javascript' src='../assets/js/vue.js' ></script>
</head>
<body>
    <h1>v-if&v-else&v-show</h1>
    <hr>
    <div id="app" >
        <!-- 模板的输出方式，把message变量渲染到模板里 -->
        <div v-if='isLogin'> 你好，Jason Niu</div>
        <div v-else>您还没有登陆，请登陆！</div>
    </div>
    
    <script type='text/javascript'>
       //声明变量且实例化(生成器)
        var app =new Vue({
            el:'#app',
            data:{
                isLogin:false
            }

        })
    
    </script>
</body>
</html>

2、v-show调整css实例

在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：JSPang，如果为false时，就显示请登录后操作。
v-show ：调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
<div v-show="isLogin">你好：JSPang</div>

v-if 和v-show的区别：
v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。

听雪闻歌

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue：Vue基础知识之利用v-if、v-else语句控制页面文本内容的改变

1、v-if、v-else判断语句实例v-if='isLogin' //类似 if elsev-elsev-if:是vue 的一个内部指令，指令用在我们的html中。 v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。1、index.html文件&lt;!DOCTYPE html&gt;&lt;html lang...
复制链接

扫一扫