Vue【2】基本方法

1.显示结果

在两个花括号之间之间引用变量名就可以了

    <div id="app">
        {{message}}
        </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!',
            }
        })
        }
    </script>

2.IF判断

使用 v-if 来判断是否显示该标签，可以结合事件来改变结果，当 app.seen为true时标签显示，当app.seen为false时标签不显示

    <div id="app">
        <div v-if='seen'>显示</div>
        </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                seen:true
            }
        })
    </script>

3.FOR循环

使用 v-for 来显示该循环标签

    <div id="app">
        <ol>
            <li v-for="i in strs">{{i.title}}:{{i.int}}</li>
        </ol>
        </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                strs:[
                    {title:'13131',int:123},
                    {title:'12324',int:456}
                ]
            }
        })
    </script>

4.输入

使用 v-model 来显示该循环标签，并将输入结果与变量"message"的值进行绑定

    <div id="app">
        {{message}}
        <input v-model='message'>
        </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!',
        })
    </script>