Vue事件处理及表单输入绑定

最新推荐文章于 2024-03-25 10:27:33 发布

遥岑.

最新推荐文章于 2024-03-25 10:27:33 发布

阅读量402

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_52942098/article/details/125673813

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

事件处理

例子

可以用v-on指令监听DOM事件，在触发时运行一些js代码。

<body>
    <div id="app">
        <button v-on:click="counter+=1">add</button>
        <p>{{counter}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            counter:0
        }
    })
</script>

许多事件处理逻辑比较复杂，不能直接将js代码写在v-on指令中，因此v-on还可以接受一个需要调用的方法名称。

<body>
    <div id="app">
        <button v-on:click="greet">11</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            name:'yc'
        },
        methods:{
            greet:function(event) {
                console.log(this.name)
                if(event) {
                    console.log(event.target.tagName)
                }
            }
        }
    })
</script>

也可以在内联js语句中调用方法。
如果需要在内联语句处理器中访问原始的DOM事件，可以用特殊变量$event将他传入方法。

<body>
    <div id="app">
        <button v-on:click="warn('yet',$event)">submit</button>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        methods:{
            warn:function(message,event) {
                if(event) {
                    console.log(event)
                    event.preventDefault()
                }
                console.log(message)
            }
        }
    })
</script>

事件修饰符

在事件处理程序中调用event.preventDefault或event.stopPropagation是非常常见的，为了使方法只有数据逻辑，而不是处理DOM事件细节，vue提供了事件修饰符。
使用修饰符要注意顺序。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

表单输入绑定

v-model可以用来创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素，它本质上是一个语法糖，负责监听用户的输入事件来更新数据，并对一些极端场景进行特殊处理。

v-model忽略所有表单元素的value、checked、selected的属性值而把vue实例的数据作为数据来源，可以在js的data中声明初始值。

例子

文本

<body>
    <div id="app">
        <input v-model="message" placeholder="输入">
        <p>{{message}}</p>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:''
        }
    })
</script>

多行文本

<body>
    <div id="app">
        <p>{{message}}</p>
        <textarea v-model="message" placeholder="add"></textarea>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:''
        }
    })
</script>

在文本区域textarea插值不会生效，可以用v-model代替

复选框

<body>
    <div id="app">
        <input type="checkbox" id="jack" value="jack" v-model="checkNames">
        <label for="jack">jack</label>
        <input type="checkbox" id="mary" value="mary" v-model="checkNames">
        <label for="jack">mary</label>
        <input type="checkbox" id="summer" value="summer" v-model="checkNames">
        <label for="jack">summer</label>
        <br>
        <span>{{checkNames}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            checkNames:[]
        }
    })
</script>

单选按钮

<body>
    <div id="app">
        <input type="radio" id="one" value="one" v-model="pick">
        <label for="one">one</label>
        <input type="radio" id="two" value="two" v-model="pick">
        <label for="two">two</label>
        <br>
        <span>{{pick}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            pick:''
        }
    })
</script>

选择框

<body>
    <div id="app">
        <select v-model="select">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>{{select}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            select:''
        }
    })
</script>

<body>
    <div id="app">
        <select v-model="select" multiple style="width: 50px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>{{select}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            //多选时绑定到一个数组上
            select:[]
        }
    })
</script>

v-for渲染动态选项

<body>
    <div id="app">
        <select v-model="select">
            <option v-for="option in options" v-bind:value="option.value">
                {{option.text}}
            </option>
        </select>
        <span>{{select}}</span>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            select:'',
            options:[
                {text:'One',value:'A'},
                {text:'Two',value:'B'},
                {text:'Three',value:'C'}
            ]
        }
    })
</script>

修饰符

.lazy

默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，可以添加lazy修饰符，从而转在change事件之后进行同步。

<input v-model.lazy='msg'>

.number

可以将用户的输入值转为数值类型。
即使在type='number’时，HTML输入元素的值也总会返回字符串，如果不能被parseFloat解析，会返回原始的值。

<input v-model.number='age' type='number'>

.trim

自动过滤用户输入的首尾空白字符。

<input v-model.trim='msg'>

遥岑.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue事件处理及表单输入绑定

Vue事件处理及表单绑定
复制链接

扫一扫

专栏目录

Vue事件处理及表单输入绑定

目录

事件处理

例子

事件修饰符

表单输入绑定

例子

修饰符

“相关推荐”对你有帮助么？