Vue常用特性——表单操作、表单域修饰符（number：转化为数值 ；trim：去掉开始和结尾的空格 ； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令
生活随笔
收集整理的這篇文章主要介紹了
Vue常用特性——表单操作、表单域修饰符（number：转化为数值 ；trim：去掉开始和结尾的空格 ； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue常用特性
常用特性概覽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="text/css">form div {height: 40px;line-height: 40px;border: 1px solid rebeccapurple;}form div:nth-child(4) {height: auto;}form div span:first-child {display: inline-block;width: 100px;}</style> </head> <body><div id="app"><form action="http://itcast.cn"><div><span>姓名：</span><span><input type="text" v-model='uname'></span></div><div><span>性別：</span><span><input type="radio" id="male" value="1" v-model='gender'><label for="male">男</label><input type="radio" id="female" value="2" v-model='gender'><label for="female">女</label></span></div><div><span>愛好：</span><input type="checkbox" id="ball" value="1" v-model='hobby'><label for="ball">籃球</label><input type="checkbox" id="sing" value="2" v-model='hobby'><label for="sing">唱歌</label><input type="checkbox" id="code" value="3" v-model='hobby'><label for="code">寫代碼</label></div><div><span>職業：</span><select v-model='occupation' multiple><option value="0">請選擇職業...</option><option value="1">教師</option><option value="2">軟件工程師</option><option value="3">律師</option></select></div><div><span>個人簡介：</span><textarea v-model='desc'></textarea></div><div><input type="submit" value="提交" @click.prevent='handle'></div></form></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*表單基本操作*/var vm = new Vue({el: '#app',data: {uname: 'lisi',gender: 2,hobby: ['2','3'],// occupation: 3occupation: ['2','3'],desc: 'nihao'},methods: {handle: function(){// console.log(this.uname)// console.log(this.gender)// console.log(this.hobby.toString())// console.log(this.occupation)console.log(this.desc)}}});</script> </body> </html>? ? ? ? ? ?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><input type="text" v-model.number='age'><input type="text" v-model.trim='info'><input type="text" v-model.lazy='msg'><div>{{msg}}</div><button @click='handle'>點擊</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*表單域修飾符*/var vm = new Vue({el: '#app',data: {age: '',info: '',msg: ''},methods: {handle: function(){console.log(this.age + 13)console.log(this.info.length)}}});</script> </body> </html>
自定義指令
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><input type="text" v-color='msg'></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*自定義指令-帶參數*/Vue.directive('color', {bind: function(el, binding){// 根據指令的參數設置背景色// console.log(binding.value.color)el.style.backgroundColor = binding.value.color;}});var vm = new Vue({el: '#app',data: {msg: {color: 'blue'}},methods: {handle: function(){}}});</script> </body> </html>
局部指令?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><input type="text" v-color='msg'><input type="text" v-focus></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*自定義指令-局部指令*/var vm = new Vue({el: '#app',data: {msg: {color: 'red'}},methods: {handle: function(){}},directives: {color: {bind: function(el, binding){el.style.backgroundColor = binding.value.color;}},focus: {inserted: function(el) {el.focus();}}}});</script> </body> </html>總結
以上是生活随笔為你收集整理的Vue常用特性——表单操作、表单域修饰符（number：转化为数值 ；trim：去掉开始和结尾的空格 ； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 分支结构||分支循环结构||使用原生js
- 下一篇： 计算属性|| 计算属性与方法的区别：计算