前些天發(fā)現(xiàn)了一個巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點擊跳轉(zhuǎn)到教程。

代碼：

<template> <div > <p>----------------------------------------------------------------------------------------------------------------------<p/><!-- input 框: trim 自動過濾用戶輸入的首尾空格 --><input v-model.trim="inputContent" placeholder=" 請輸入 ... ">input 框內(nèi)容為: {{ inputContent }}<p><p/><!-- 文本域 --><textarea v-model="textarea" placeholder="請輸入 ... "></textarea>文本域 內(nèi)容為： {{ textarea }}<p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 復(fù)選框 --><p>單個復(fù)選框 （取邏輯值）：</p> <input type="checkbox" v-model="checked"><label>{{ checked }}</label><p>多個復(fù)選框 （綁定到同一個數(shù)組）：</p><input type="checkbox" value="我" v-model="checkedNames"><label>我</label><input type="checkbox" value="喜歡" v-model="checkedNames"><label>喜歡</label><input type="checkbox" value="小熊" v-model="checkedNames"><label>小熊</label><br><span>復(fù)選框數(shù)組的值為: {{ checkedNames }}</span><p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 單選框 --><input type="radio" value="是" v-model="picked"><label>是</label><br><input type="radio" value="否" v-model="picked"><label>否</label><br><span>單選框選中值為: {{ picked }}</span><p>----------------------------------------------------------------------------------------------------------------------<p/><!-- 下拉菜單 --><div id="app"><select v-model="selected"><option value="">---選水果啰---</option><option value="大柚子">大柚子</option><option value="小柚子">小柚子</option><option value="大大小小的柚子">大大小小的柚子</option></select><br/> <br/> <div id="output">選擇的水果是: {{selected}} (啦啦啦，悄悄告訴你，反正我就是喜歡柚子 ...) </div></div><p>----------------------------------------------------------------------------------------------------------------------<p/></div> </template><script type="text/javascript">export default { data () {return {selected: '' ,picked : '是',checked : false,checkedNames: [],inputContent: '',textarea: ''}} }</script>

運行效果：

總結(jié)

以上是生活随笔為你收集整理的Vue.js 极简小例：表单 （输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。