zoukankan      html  css  js  c++  java
  • Vue

    .lazy

    在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。
    使用 lazy 修饰符,从而转变为使用 change 事件进行同步

    <div id="app">
    	<input type="text" v-model.lazy="message">
    	<p>{{message}}</p>
    </div>
    <script>
    new Vue({
    	el: '#app',
    	data: {
    		message: ""
    	}
    })
    </script>
    


    ### .number 首先声明这个`number`并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 `number `类型

    举个例子,如果用户输入300,data 中绑定的其实是'300'(string),添加 number 指令后可以得到 300(number)的绑定结果。
    而如果用户输入的不是数字,这个指令并不会产生任何效果。

    <div id="app">
    	<input type="text" v-model.number="message">
    	<p>{{message}}</p>
    	<input @click="assay" type="button" value="获取"> 
    </div>
    <script>
    new Vue({
    	el: '#app',
    	data: {
    		message: ""
    	},
    	methods: {
    		assay () {
    			console.log(typeof this.message);
    		}
    	}
    })
    </script>
    



    当不加number修饰符,输入123456..数字的时候显示的类型为string



    .trim

    过滤输入的首尾空白字符

    <div id="app">
    	<input type="text" v-model.trim="message">
    	<p>{{message}}</p>
    	<input @click="assay" type="button" value="获取"> 
    </div>
    <script>
    new Vue({
    	el: '#app',
    	data: {
    		message: ""
    	},
    	methods: {
    		assay () {
    			console.log(this.message);
    		}
    	}
    })
    </script>
    


    > 当不添加 `trim` 修饰符

  • 相关阅读:
    python函数内容
    python读写csv文件
    python正则表达式
    python使用MYSQL数据库
    python简单面试题
    python执行cmd命令
    python详解json模块
    我的自动化测试之路
    测试开发这一年
    招聘测试人员,我在面试什么?
  • 原文地址:https://www.cnblogs.com/xiaobaiv/p/9153020.html
Copyright © 2011-2022 走看看