当前位置： 移动技术网 > IT编程>开发语言>JavaScript > vue.js（3）--v-bind与v-on

vue.js（3）--v-bind与v-on

2019年08月12日  | 移动技术网IT编程  | 我要评论

vue中的v-bind与v-on的使用

（1）实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>v-bind v-on</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div class="app">
        <input type="button" v-bind:title="mytitle" value="按钮1" v-on:click="show">
        <!-- v-bind用来绑定属性 --><!-- v-on用来绑定点击事件 --> 
        <input type="button" :title="mytitle" value="按钮2" v-on:mouseover="show">
        <!-- v-bind:title可以简写为:title --><!-- v-on用来绑定鼠标移动事件 --> 
        <input type="button" v-bind:title="mytitle + '后来增加的内容'" value="按钮3" v-on:mouseout="show">
        <!-- v-bind中引号内容可看做一个js中的表达式，因此可进行连接字符串的操作，写合法的js表达式-->
    </div>
    <script>
        var vm = new vue({
            el:'.app',
            data:{
                mytitle:'我是一个title'
            },
            methods:{
                show:function() {
                    alert('你好呀！')
                } //定义了一个方法show，通过v-on绑定到事件中，实现效果
            }
        })
    </script>
</body>
</html>

（2）摘要

　　v-bind用来绑定属性（v-bind:title="mytitle"），v-on用来绑定事件（v-on:click="show"）。

　　v-bind：绑定的属性名称  可简写为：绑定的属性名称。

　　v-on:绑定的事件名称  可简写为  @绑定的事件名称。

　　v-bind中引号内容可看做一个js中的表达式，因此可进行连接字符串的操作，可以写其他合法的js表达式。

　　在vm中的methods对象中定义方法--show:function() {alert('你好呀！')} 。通过v-on绑定到事件中，实现效果。

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网