4 事件与双向数据绑定

最新推荐文章于 2023-06-08 10:58:23 发布

zlk_blogs

最新推荐文章于 2023-06-08 10:58:23 发布

阅读量102

点赞数

分类专栏： Vue 前端框架文章标签： vue 事件双向数据绑定

Vue 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

前端框架

7 篇文章 0 订阅

订阅专栏

事件v-on与双向数据绑定v-model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>事件与双向数据绑定</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!--massage加一，并将数据绑定到P标签-->
            <p>点击次数：{{massage}}</p>
            <button v-on:click="massage+=1">加一</button>

            <!--双向数据绑定-->
            <p>{{mess}}</p>
            <input type="text" v-model:value="mess"></input>
            <button v-on:click="reverse">反转</button>

            <!--greet方法-->
            <p v-on:click="greet">Green</p>

            <!--内联 JavaScript 语句中调用方法-->
             <button v-on:click="say('hi')">Say hi</button>

             <button @click="warn('Form cannot be submitted yet.', $event)">
                Submit
             </button>

        </div>
    </body>
    <script type="text/javascript">
        //js中可以app.greet()调用方法.
        var app = new Vue({
            el:'#app',
            data:{
                massage:0,
                mess:'hello word!',
                name:'vue.js'
            },
            methods:{
                greet:function(event){
                    // `this` 在方法里指向当前 Vue 实例
                    alert('Hello ' + this.name + '!')
                     // `event` 是原生 DOM 事件
                   if (event) {
                        alert(event.target.tagName)
                    }
                },
                say:function(message){
                    alert(message);
                },
                 warn: function (message, event) {
                    // 现在我们可以访问原生事件对象
                    if (event) event.preventDefault()
                    alert(message)
              },
              reverse:function(){
                 this.mess=this.mess.split('').reverse().join('');
              }
            },
        })
    </script>

</html>

zlk_blogs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4 事件与双向数据绑定

事件v-on与双向数据绑定v-model<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>事件与双向数据绑定</title> <script src="https://cdn.jsdel...
复制链接

扫一扫