vue.js(3)--v-bind与v-on

2019-08-14 10:33:32来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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绑定到事件中,实现效果。

 


原文链接:https://www.cnblogs.com/qiqisusu/p/11339479.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:javascript错误处理

下一篇:es6学习笔记(二)