Vue-1-循环和点击事件

版权声明:本文为博主原创文章,未经博主允许不得转载。我的博客:http://yanganlin.com/ https://blog.csdn.net/yal23333/article/details/78872538
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>入门</title>
    <script></script>
    <script src="../js/vue.js"></script>

</head>
<body>

v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

<hr>
        <!--循环-->
        <div id="app">
            {{message}}
            <hr>
            <ul>
                <!--json循环-->
                <li v-for="(value1,key,index) in json">
                    {{ value1}}--{{index}}--{{key}}
                </li>
                <hr>
                <!--list循环-->
                <li v-for="(value2,index) in arr">
                    {{ value2}}--{{index}}
                </li>
            </ul>
        </div>


        <!--点击事件-->
        <div id="app2">
            <input type="button" value="alert" onclick="alert('alert')">
            <input type="button" value="滑动添加" v-on:mouseover="add()" >
            <input type="button" value="双击添加" v-on:dblclick="add()" >
            <ul>
                <li v-for="value in arr">
                    {{value}}
                </li>
            </ul>
        </div>





</body>

<script>
    //循环
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            json:{a:"一",b:"二",c:"三",d:"四"},
            arr:["一","二","三","四"]
        }
    });

    //事件
    new Vue({
        el: '#app2',
        data: {
            message: 'Hello Vue!',
            json:{a:"一",b:"二",c:"三",d:"四"},
            arr:["一","二","三","四"]
        },
        methods:{
            add:function () {
                this.arr.push("五")
            }
        }
    })
</script>
</html>
展开阅读全文

没有更多推荐了,返回首页