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事件）||自定义指令|| 局部指令相关推荐

[Vue.js] 基础 -- Vue常用特性
Vue常用特性常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期表单操作基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 rad ...
Vue常用特性~非常详细哦，带源码资料
下面是对Vue常用特性的整理,希望可以帮助到有需要的小伙伴~ 源码资料: 链接:https://pan.baidu.com/s/14rRYtUfXkO6mxUtCh4FCcA 提取码:e0sw 文章目 ...
表单域修饰符numebr、trim、lazy
表单域修饰符 number:转化为数值 trim:去掉开始和结尾的空格 lazy:将input事件切换为change事件 1.number:转化为数值 <input type="tex ...
前端案例-30 Vue常用特性案例汇总
表单的操作 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...
Xcode 7新特性Lightweight Generics 轻量级泛型与__kindof修饰符
Lightweight Generics 轻量级泛型,轻量是因为这是个纯编译器的语法支持(llvm 7.0),和 Nullability 一样,没有借助任何 objc runtime 的升级,也就是说 ...
vue基础v-moder修饰符( number, trim, lazy )
v-moder修饰符一. v-model修饰符语法法: v-model.修饰符="变量" 二.这里只列举v-model修饰符在表单中的作用 number修饰符: 把数据转换为数字 ...
前端学习（1208）:vue常用特性
Vue中v-on的基础用法、参数传递和修饰符
目录一.v-on的基本用法使用v-on:click给button绑定监听事件以及回调函数,@是v-on:的缩写,也就是简写也可以使用@click.方法一般是需要写方法名加上(),在@click中可 ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...

Vue常用特性——表单操作、表单域修饰符（number：转化为数值；trim：去掉开始和结尾的空格； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令

Vue常用特性

自定义指令

局部指令

Vue常用特性——表单操作、表单域修饰符（number：转化为数值；trim：去掉开始和结尾的空格； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令相关推荐

最新文章

热门文章

Vue常用特性——表单操作、表单域修饰符（number：转化为数值 ；trim：去掉开始和结尾的空格 ； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令

Vue常用特性

自定义指令

局部指令

Vue常用特性——表单操作、表单域修饰符（number：转化为数值 ；trim：去掉开始和结尾的空格 ； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令相关推荐

最新文章

热门文章

Vue常用特性——表单操作、表单域修饰符（number：转化为数值；trim：去掉开始和结尾的空格； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令

Vue常用特性——表单操作、表单域修饰符（number：转化为数值；trim：去掉开始和结尾的空格； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令相关推荐