Vue-1-循环和点击事件

最新推荐文章于 2024-05-22 14:22:49 发布

木木在唱歌

最新推荐文章于 2024-05-22 14:22:49 发布

阅读量2.1k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/yal23333/article/details/78872538

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

木木在唱歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-1-循环和点击事件

<!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>
复制链接

扫一扫