Vue罕用个性

  • 表单操作
  • 自定义指令
  • 计算属性
  • 侦听器
  • 过滤器
  • 申明周期

Vue之表单操作

  • input:单行文本
  • textarea：多行文本
  • select:下拉多选
  • radio:单选框
  • checkbox:多选框
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Vue之表单操作</title>    <style>        * {            margin:0;            padding: 0;        }        form {            width: 500px;            margin: 200px auto;        }        p {            margin-top: 20px;        }        input {            margin-left: 20px;        }       p  textarea {            vertical-align: center;        }    </style></head><body><div id="app">    <form action="http:///www.baidu.com">        <!-- 单行文本-->        <p>账号：<input type="text" v-model="uname"></p>        <!--单选-->        <p>性别：<input type="radio" name="sex" v-model="sex" value="1">男<input type="radio" name="sex" v-model="sex" value="2">女</p>        <!--多选-->        <p>性别：<input type="checkbox" name="hobby" v-model="hobby" value="1">篮球<input type="checkbox" name="hobby" v-model="hobby" value="2">足球<input type="checkbox" name="hobby" v-model="hobby" value="3">乒乓球</p>        <!--下拉菜单-->        <p>            下拉菜单:            <select v-model="carte" multiple="true" >                 <option value="1">WEB前端</option>                 <option value="2">java</option>                 <option value="3">大数据</option>                 <option value="4">c++</option>                 <option value="5">经营</option>                 <option value="6">产品经理</option>            </select>        </p>    <!--留言板-->        <p>  留言：<textarea  v-model="textbox"> </textarea></p>    <!--提交按钮-->        <p> <input type="submit" value="提交" @click.prevent="handle"></p>    </form></div><script src="./vue.min.js"></script><script>    let vm = new Vue({        el:"#app",        data:{            uname:"尧子陌",            sex:2,            hobby:['1','2','3'],            carte:['1','2'],            textbox:'留言板'        },        methods:{            handle:function (){                console.log(this.hobby.toString())            }        }    })</script></body></html>