vue-2 基本指令

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="https://vuejs.org/js/vue.js"></script>
        <script>
            /*
                template:用里面的数据去替换掉 el找到的dom节点, template里面的数据只能有一个根节点
                用data里面返回的变量,通过双花括号输出



            */
            new Vue({
                el:"#app",
                template:`
                <div>
                    <div v-text="text"></div>
                    <div v-html="html"></div>
                    <div v-if="ifdemo">测试if<br><br></div>

                    <div v-if="ifelsedemo==1">测试if和if-else 1<br><br></div>
                    <div v-else-if="ifelsedemo==2">测试if和if-else 2<br><br></div>

                    <div v-if="ifelseelse==1">测试if和if-else和 else 1<br><br></div>
                    <div v-else-if="ifelseelse==2">测试if和if-else和 else 2<br><br></div>
                    <div v-else>测试if和if-else和 else 其他<br><br></div>

                    <div v-show="showdemo=='aaa'">测试show<br><br></div>

                    <ul>
                        <li v-for=" item in fordemo ">
                            {{item}}
                        </li>
                    </ul>
                    <ul>
                        <li v-for=" (item,index) in fordemo ">
                            {{item}}--{{index}}
                        </li>
                    </ul>

                <ul>    
                    <li v-for=" (value,key,index) in fordemo2 ">
                            {{value}}--{{key}}--{{index}}
                        </li>
                    </ul>

                    <ul>    
                        <li v-for=" (value,key) in fordemo3.data ">
                                {{value.name}}--{{value.love}}--{{key}}
                            </li>
                    </ul>



                </div>


                `,
                data:function(){
                    return {
                        text:"<h1>贰狗</h1>", //输出纯文本
                        html:"<h1>贰狗</h1>",//可以解析html标签
                        ifdemo:true, //判断是否成立 例如 ifdemo是否为真 来决定是否显示
                        ifelsedemo:1, //判断是否成立 例如 如果ifelsedemo=1显示第一个,ifelsedemo=2显示第二个
                        ifelseelse:3,//判断是否成立 例如 如果ifelseelse=1显示第一个,ifelseelse=2显示第二个 否则显示其他
                        showdemo:'aaa', //判断是否显示
                        fordemo:['小明','李雷','韩梅梅'], //循环出数组和index
                        fordemo2:{name:'李雷',love:'韩梅梅',baba:'李大雷'},//可以循环出键
                        fordemo3:{data:[{name:'李雷',love:'韩梅梅',baba:'李大雷'},{name:'李雷2',love:'韩梅梅2',baba:'李大雷2'}]}//循环二维数组



                    }
                }
            })
        </script>
    </body>
</html>
发表评论 / Comment

用心评论~