Vue基础3

作者: Taoyongpan | 来源:发表于2018-05-25 22:35 被阅读0次
    QQ截图20180525223327.png

    截图的显示顺序就是代码的顺序;
    html页面:

    <!DOCTYPE html>
    <html>
    <head>
        <title>Vue3</title>
        <meta charset="UTF-8">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <link rel="stylesheet" type="text/css" href="index.css">
        
    </head>
    <body>
        <div id ="vue-top">
            {{ name }}
        </div>
        <b>v-if标签是判断的意思</b>
        <div id="app-1">
            <p v-if = "seen">现在你看到我了</p>
        </div>
        <b>v-for 指令可以绑定数组的数据来渲染一个项目列表</b>
        <div id="app-2">
            <ol>
                <li v-for = "todo in todos">
                {{ todo.text }}
                </li>
            </ol>
        </div>
        <b>v-on 指令添加一个事件监听器</b>
        <div id="app-3">
            <p>{{ message }}</p>
            <button v-on:click = "reverseMessage">逆转消息</button>
        </div>
        <b>v-model能轻松实现表单输入和应用状态之间的双向绑定</b>
        <div id="app-4">
            <p>{{ message }}</p>
            <input type="text" v-model = "message">
        </div>
        
        <script src="index.js"></script>
    </body>
    </html>
    

    js代码:

    var top = new Vue({
        el:'#vue-top',
        data:{
            name:"Taoyongpan"
        }
    })
    var app1 = new Vue({
        el:'#app-1',
        data:{
            seen:true
        }
    })
    var app2 = new Vue({
        el:'#app-2',
        data:{
            todos:[
                {text:'数组测试'},
                {text:'数组测试'},
                {text:'数组测试'}
            ]
        }
    })
    var app3 = new Vue({
        el:'#app-3',
        data:{
            message:'Hello World!'
        },
        methods:{
            reverseMessage : function(){
                this.message = this.message.split(' ').reverse().join(' ')
            }
        }
    })
    var app4 = new Vue({
        el:'#app-4',
        data:{
            message:"Hello Vue"
        }
    });
    
    

    相关文章

      网友评论

        本文标题:Vue基础3

        本文链接:https://www.haomeiwen.com/subject/mhhpjftx.html