表单修饰符
vue 中的表单修饰符有：number、trim、lazy
- number 将输入框内的字符转为数字
- trim 将输入框内中前后的空格去掉
- lazy 将输入框的值与数据转变在 change 事件中同步
number 修饰符
vue 中 number 修饰符的作用是将输入框内的字符串转换成数字
<input v-model.number="number"> <p @click="showMsg">{
{
number }}</p> <script> methods: {
showMsg: function() {
console.log(this.number) console.log(typeof(this.number)) } } </script> trim 修饰符
vue 中 trim 修饰符的作用是将输入框内中前后的空格去掉
<input v-model.trim="search_text"> <p v-on:click="showContent"> {
{
search_text }}</p> <script> showContent: function() {
console.log( "a" + this.search_text) } </script> lazy 修饰符
在 change 而非 input 时更新
<input v-model.lazy = 'msg'> <span> {
{
msg}} </span> <script> new Vue({
el:'#app', data:{
msg:'lazy' } }) </script> 事件修饰符
.stop：等同于 js 中的 event.stopPropagation()，防止事件冒泡，阻止事件传播
.prevent：等同于js中的 event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播），阻止事件（超链接）默认行为
.capture：与事件冒泡的方向相反，事件捕获
.self：只会触发自己范围内的事件，不包含子元素（事件目标对象是自己，才会触发）
.once：只会触发一次
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/218082.html原文链接：https://javaforall.net
