千峰商城-springboot项目搭建-25-vue条件渲染

在html标签可以添加v-if指令指定一个条件，如果条件成立则显示此HTML标签，如果不成立则不显示当前标签。

条件可以是一个表达式，也可以是一个具体的布尔类型值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <h3 v-if="code == 1">从前有座山</h3>
            <h3 v-if="b">从前有座山</h3>
            
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    code:2,
                    b:false
                }
            });
        </script>
        
    </body>
</html>

 

 

v-else的使用：

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <h3 v-if="code == 1">从前有座山</h3>
            <!--v-else标签需要紧跟在v-if的标签后，中间不能有其他标签-->
            <h3 v-else>山里有座庙</h3>
            
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    code:1,

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

 

 

v-else-if多分支语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <h3 v-if="code == 1">从前有座山</h3>
            <!--v-else标签需要紧跟在v-if的标签后，中间不能有其他标签-->
            <h3 v-else>山里有座庙</h3>
            
            <h3 v-if="code >= 90">优秀</h3>
            <h3 v-else-if="code >= 80">良好</h3>
            <h3 v-else-if="code >= 70">中等</h3>
            <h3 v-else-if="code >= 60">及格</h3>
            <h3 v-else>不想理你</h3>                
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    code:100                    
                }
            });
        </script>
        
    </body>
</html>

 

 

v-show

从功能上讲，与v-if作用相同。渲染过程有区别。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="container">
            <h3 v-if="code == 1">从前有座山</h3>
            <!--v-else标签需要紧跟在v-if的标签后，中间不能有其他标签-->
            <h3 v-else>山里有座庙</h3>
            
            <h3 v-if="code >= 90">优秀</h3>
            <h3 v-else-if="code >= 80">良好</h3>
            <h3 v-else-if="code >= 70">中等</h3>
            <h3 v-else-if="code >= 60">及格</h3>
            <h3 v-else>不想理你</h3>    
            
            <!--不符合条件，直接不渲染-->
            v-if : <label v-if="gender == 'M'">男</label><br />
            <!--不管条件成不成立都渲染,条件不成立则不显示-->
            v-show : <label v-show="gender == 'M'">男</label>
            <br />
            
            <input type="text" v-model="gender" />
        </div>
        
        <script type="text/javascript">
            var vm = new Vue({
                el:"#container",
                data:{
                    code:100,
                    gender:"M"
                }
            });
        </script>
        
    </body>
</html>

 

 

 

 

 
 
posted @ 2022-07-07 17:15  临易  阅读(43)  评论(0)  编辑  收藏  举报