vue-bind&v-on-methods指令--日常作业02 v-on-methods

59 阅读 0 评论 39 点赞

我是靠谱客的博主故意网络，最近开发中收集的这篇文章主要介绍vue-bind&v-on-methods指令--日常作业02 v-on-methods，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

01先看看v-bind

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a href="https://www.baidu.com/">跳转</a>
        <a v-bind:href="url">跳转</a>
        <button @click="change" target="_blank">跳转</button>


    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                url:'https://www.taobao.com/'
            },
            methods:{
                change(){
                    this.url='https://www.jd.com/'
                }
            }
        })
    </script>

</body>

</html>

控制台输出结果：

第一个调整结果：

第二个跳转结果：

02 v-on-methods


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <!-- 当点击这个按钮，就调用fn1函数 -->
        <button v-on:click="fn1">点我</button>
        <button v-on:dblclick="fn1">点我双击</button>
        <button v-on:mouseenter="fn2">移入我</button>
        <!-- 简写形式：把v-on：改为@ -->
        <h4>简写如下</h4>
        <!-- 当点击这个按钮，就调用fn1函数 -->
        <button @click="fn1">点我啊</button>
        <button @dblclick="fn1">点我双击</button>
        <button @mouseenter="fn2">移入我</button>

    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
        el: '#app',
            methods:{
                // 被调用的fn1函数
            fn1(){
                alert('点我干啥')
            },

            //被调用的fn1函数
            fn2(){
                alert('jiudianni')
          
            }
        }
        })
     </script>

</body>

</html>

控制台输出结果：