<!DOCTYPE html>
<html>
    <head>
        <meta  charset="utf-8">
        <title></title>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div>{{a}}</div>
            <div v-once>{{b}}</div>
            <div v-html="c"></div>
            <div v-bind:class="d_class">{{d}}</div>
            <div>{{e+1}}</div>
            <div>{{f ? "TRUE" : "NO"}}</div>
            <div>{{g.split("")}}</div>
            <div v-if="h==1">v-if测试,h是1的时候我才显示!</div>
            <div v-else-if="h==2">v-if测试,h是2的时候我才显示!</div>
            <div v-else-if="h==3">v-if测试,h是3的时候我才显示!</div>
            <div v-else-if="h==4">v-if测试,h是4的时候我才显示!</div>
            <div v-else>v-if测试,h是其它值的时候我才显示!</div>
            <div v-bind:class="{green:isGreen}">{{i}}</div>
            <div :style="{fontSize: is100px ? '100px' : ''}">{{i}}</div>
            <div v-show="j">j是true的时候显示我!</div>
            <div>
                <ul>
                    <li v-for="value,key in k">
                        {{key}}-{{value}}
                    </li>
                </ul>
            </div>
            <div>
                <ul>
                    <li v-for="value,index in m">
                        {{index}}-{{value}}
                    </li>
                </ul>
            </div>
            <div v-on:click="click1">
                <div v-on:click.stop="click2">
                    点一下我!
                </div>
            </div>
            <div v-on:dblclick="click3">
                双击我!
            </div>
            <div>
                <input v-model="n1" />
                <p>{{n1}}</p>
                <textarea v-model="n2"></textarea>
                <p>{{n2}}</p>
            </div>
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:app,
                data:{
                    a:"aValue",
                    b:"bValue",
                    c:"<span style='color:red'>cValue</span>",
                    d:"dValue",
                    d_class:"red",
                    e:108,
                    f:true,
                    g:"Hello World!",
                    h:3,
                    i:"iValue",
                    isGreen:true,
                    is100px:true,
                    j:true,
                    k:{messageK1:"valueK1",messageK2:"valueK2"},
                    m:[{messageM1:"valueM1"},{messageM2:"valueM2"}],
                    n1:"我是n1初始值!",
                    n2:"我是n2初始值!"
                },
                methods:{
                    click1 : function(){
                        console.log("Click1..."+this.a);
                    },
                    click2 : function(){
                        console.log("Click2..."+this.b);
                    },
                    click3 : function(){
                        alert("我被双击了!");
                    }
                }
            });
        </script>
        <script type="text/javascript">
            vm.$data.a = "newAValue";
            vm.$data.b = "newBValue";
            vm.$data.c = "<span style='color:red'>newCValue</span>";
            vm.$data.d_class = "green";
        </script>
        <style type="text/css">
            .red{color:red;}
            .green{color:green;}
        </style>
    </body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注