Vue表單實例代碼
更新時間：2016年09月05日 16:48:13 作者：Sunshine_lily
Vue.js 是用于構建交互式的 Web 界面的庫。這篇文章主要介紹了Vue表單實例代碼的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
什么是 Vue.js？
Vue.js 是用于構建交互式的 Web 界面的庫。
Vue.js 提供了 MVVM 數據綁定和一個可組合的組件系統(tǒng)，具有簡單、靈活的 API。
Vue.js 特點
簡潔： HTML 模板 + JSON 數據，再創(chuàng)建一個 Vue 實例，就這么簡單。
數據驅動： 自動追蹤依賴的模板表達式和計算屬性。
組件化： 用解耦、可復用的組件來構造界面。
輕量： ~24kb min+gzip，無依賴。
快速： 精確有效的異步批量 DOM 更新。
模塊友好： 通過 NPM 或 Bower 安裝，無縫融入你的工作流。
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson11
一 vue表單
實在是太簡單了,直接來個例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue表單</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<!--輸入框-->
<input type="text" v-model="msg"> <br />
<!--單選框-->
<input id="mycb1" type="radio" v-model="choose1">
<label for="mycb1">{{choose1}}</label>
<!--復選框-->
<input id="mycb2" type="checkbox" v-model="choose2">
<label for="mycb2">{{choose2}}</label>
<!--Select-->
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>選中: {{ selected }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: ".test",
data: {
msg: '我是文本',
choose1: false,
choose2: false,
selected:''
}
})
</script>
</body>
</html>
以上所述是小編給大家介紹的Vue表單實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了vue項目中實現(xiàn)圖片裁剪功能，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-06-06
打通前后端構建一個Vue+Express的開發(fā)環(huán)境
這篇文章主要介紹了打通前后端構建一個Vue+Express的開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue elementUI select下拉框如何設置默認值
這篇文章主要介紹了vue elementUI select下拉框如何設置默認值問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue watch如何深度監(jiān)聽數組每一項的變化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
下面小編就為大家分享一篇基于Vue渲染與插件的加載順序的問題詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
父子組件之間的雙向綁定非常簡單，但是很多人因為是從Vue 2+開始使用的，可能不知道如何雙向綁定，接下來通過本文給大家介紹Vue父子組件雙向綁定傳值的實現(xiàn)方法,需要的朋友可以參考下2018-07-07
vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題詳析
這篇文章主要給大家介紹了關于vue路由守衛(wèi)及路由守衛(wèi)無限循環(huán)問題的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
收集表單數據可以使用這個v-model實現(xiàn)這個數據的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個v-model指令結合使用，這篇文章主要介紹了vue的表單數據收集，基本指令和自定義指令,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了Vue 計算屬性 computed，一般情況下屬性都是放到data中的，但是有些屬性可能是需要經過一些邏輯計算后才能得出來，那么我們可以把這類屬性變成計算屬性，下面我們來看看具體實例,需要的朋友可以參考一下2021-10-10
詳解使用element-ui table組件的篩選功能的一個小坑
在element ui 框架中，對于table框架，有一個篩選功能，這篇文章主要介紹了詳解使用element-ui table組件的篩選功能的一個小坑，非常具有實用價值，需要的朋友可以參考下2018-11-11