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

    Vue2
    2023/07/29
    查看详情

  • 自定义指令基本用法

    <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(

    Vue2
    2023/07/29
    查看详情

  • 表单域修饰符用法

    <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

    Vue2
    2023/07/29
    查看详情

  • 表单基本操作

    <!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

    Vue2
    2023/07/29
    查看详情

  • 选项卡案例

    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

    Vue2
    2023/07/16
    查看详情

  • 循环结构-遍历对象

    <!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

    Vue2
    2023/07/16
    查看详情