Vue条件渲染

　　vue基础语法_条件渲染：

一：动态添加data信息和methods方法/事件：

　　1.添加data信息：

<div id="app">
    {{data1}}
</div>
​
<script type="text/javascript">
    let application=new Vue({
        el:"#app",
        data:{
            data1:me,
            data2:you
        }
    })
</script>

　　给data1自动赋值me，给data2自动赋值you

 

　　2.methods方法/事件

       <div id="app">
            <div v-show="isShow" id="pane">
                HelloVue
            </div>
            <button @click="showPane">切换显示内容</button>
        </div>
        
        <script type="text/javascript">
        
            let application=new Vue({
                el:"#app",
                data:{
                    isShow:true
                },
                methods:{
                    showPane:function(){
                        application.isShow=!application.isShow;
                    }
                }
            })
        </script>

　　　　注意：这里使用方法的时候是对内部application进行isShow属性的操作与Dom无关

 

v-show:不显示时，就会改为display:none,但是会渲染在DOM上，反复渲染的话使用v-show，只是渲染一次的话使用v-if

 

　　3.添加多个button事件渲染：v-if使用在button不同选项上

        <div id="app">
            <div v-show="isShow" id="pane">
                HelloVue
            </div>
            <button @click="showPane" data-id="1">上首页</button>
            <button @click="showPane" data-id="2">上热搜</button>
            <button @click="showPane" data-id="3">上新闻</button>
        </div>
        
        <script type="text/javascript">
            let application=new Vue({
                el:"#app",
                data:{
                    isShow:true
                },
                methods:{
                    showPane:function(e){
                        //这里的e是vue本体，和this一样
                        console.log(e);
                        let tabid=e.target.dataset.id;
                        alert(tabid);
                    }
                }
            })
        </script>

 

　　4.列表渲染：v-for与v-if混合使用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div v-if="isLogin" class="login">
                <h3>登录</h3>
                <div>
                    用户名：
                    <input type="text" name="username" value="">
                </div>
                <div>
                    密码：
                    <input type="text" name="password" value="" />
                </div>
                
                <button type="button">登录</button>
            </div>
            
            <div v-else class="register">
                <h3>注册</h3>
                <div>
                    用户名：
                    <input type="text" name="username" value="">
                </div>
                <div>
                    密码：
                    <input type="text" name="password" value="" />
                </div>
                
                <button>注册</button>
            </div>
            <button @click="changePage" type="button">切换注册页</button>
            
        </div>
        
        <script>
            let app=new Vue({
                el:"#app",
                data:{
                    isLogin:false
                },
                methods:{
                    changePage:()=>{
                        app.isLogin=!app.isLogin;
                    }
                }
            })
        </script>
    </body>
</html>

 


​

 

 

posted @ 2021-03-23 19:18  焕不涣  阅读(61)  评论(0)  编辑  收藏  举报