智享笔记 Vue2
-
带参数的自定义指令
<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(bindi
-
自定义指令基本用法
<body> <div id="app"> <input type="text" v-focus> <input type="text"> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令 */ Vue.directive('focus', { inserted: function(el){ // el表示指令所绑定的元素 el.focus(
-
表单域修饰符用法
<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" sr
-
表单基本操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> form div { height: 40px; line-height: 40px; } form div:nth-child(4) { height: auto; } form div span:first-child { display: inline-block; width: 100px
-
选项卡案例
1 代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .tab ul { overflow: hidden; padding: 0; margin: 0; } .tab ul li { box-sizing: border-box; padding: 0; float: left; width: 100px; height: 45px; l
-
循环结构-遍历对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> </head><body> <div id="app"> <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> </div> <script type="text/javascri