Vue.js 章6 v-model與表單

阿新 • • 發佈：2019-05-11

scom utf app console trim charset sel das ini

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src 
="Vue.2.6.10.js"></script>
</head>
<body>
    <!-- v-model在文本域的用法 -->
    <div id="app1">
        <textarea name="" v-model="text" id="textarea" cols="30" rows="10"></textarea><!--拼音不會更新-->
        <textarea name="" @input = ‘handleInput‘ id="textarea" 
 cols="30" rows="10"></textarea><!--實時更新-->
        <!-- 使用v-model以後，其顯示的值只依賴綁定的數據，初始化的value屬性和textarea標簽之間的值都不會起作用 -->
        <p>輸入內容：</p>
        <p style="white-space: pre;">{{ text }}</p>
    </div>

    <div id="app2">
        <input  
type="radio" :checked = ‘picked‘ @click = ‘toggleChecked‘>
        <label for="">單選按鈕</label>
    </div>
<!-- 組合使用實現互斥選擇 -->
    <div id="app3">
        <input type="radio" v-model="picked" value="html！" id="html">
        <label for="html">Html</label>
        <br>
        <input type="radio" v-model="picked" value="css!" id="css">
        <label for="css">Css</label>
        <br>
        <input type="radio" v-model="picked" value="js!" id="js">
        <label for="js">JavaScript</label>
        <br>
        <p>被選中的項：{{ picked }}</p><!--輸出的是value中的值-->
        <!-- 原理：v-model配合value，點擊按鈕/標簽——
        v-model你可以理解成是value的更高級，：value（v-bind）屬於數據單向綁定，v-model屬於雙向綁定
        v-model官方給出的說法是：這其實是一個簡寫的形式，v-model實際執行的是下面的綁定：
        <input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />
        在本例中則是：<input type="text" v-bind:value="picked" v-on:click="picked = $event.target.value" />
        v-model是動態綁定值到value，然後監聽input的input事件獲取值後賦給dataA的一個過程。 -->
    </div>

    <!-- 復選框 -->
    <div id="app4">
        <input type="checkbox" v-model="checked" id="checked">
        <label for="checked">選擇狀態：{{ checked }}</label>
        <br>
        <input type="checkbox" v-model="multichecked" value="html！" id="html">
        <label for="html">Html</label>
        <br>
        <input type="checkbox" v-model="multichecked" value="css!" id="css">
        <label for="css">Css</label>
        <br>
        <input type="checkbox" v-model="multichecked" value="js!" id="js">
        <label for="js">JavaScript</label>
        <br>
        <p>被選中的項：{{ multichecked }}</p>
    </div>

    <div id="app5">
        <select v-model="selected" id="" multiple>
            <!-- 如果option含有value屬性，v-model就會優先匹配value的值，如果沒有就會匹配option標簽內的text -->
            <!-- 給select添加multiple就可以多選 -->
            <!-- 在業務中通常用v-for動態輸出option、value與text -->
            <option>html</option>
            <option>css</option>
            <option>js</option>
            <option>jq</option>
            <option>vue</option>
        </select>
        <p>選擇的項：{{ selected }}</p>
    </div>
    <!-- 綁定值 -->
    <div id="app6">
        <input type="radio" v-model="picked" :value="value">
        <!-- 別忘了v-model會匹配value的值 -->
        <label for="">單選按鈕</label>
        <p>{{ picked }}</p>
        <p>{{ value }}</p>

        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2" >
        <label for="">復選框</label>
        <p>{{ toggle }}</p>
        <p>{{ value1 }}</p>
        <p>{{ value2 }}</p>
    </div>

    <!-- 常見的表單修飾符 -->
    <div id="app7">
        <input type="text" v-model.lazy="message">
        <!-- 在輸入框內容發生改變後才更新 -->
        <p>{{ message }}</p>
        <input type="text" v-model.number="messageNum">
        <!-- 將輸入轉換為number類型 -->
        <p>{{ messageNum }}</p>
        <input type="text" v-model.trim="messageTrim">
        <!-- 過濾首尾空格 -->
        <p>{{ messageTrim }}</p>
        <!-- 都會同時影響輸入框中的值 -->
    </div>
</body>
<script>
    var app1 = new Vue({
       el:"#app1",
       data:{
           text:‘‘
       },
       methods: {
           handleInput:function(e){
               console.log(e,e.target);
               this.text = e.target.value;
               //InputEvent {isTrusted: true, data: "s", isComposing: true, inputType: "insertCompositionText",
                // dataTransfer: null, …} 
                // <textarea name id=?"textarea" cols=?"30" rows=?"10">?</textarea>?
           }
       },
    });

    var app2 = new Vue({
       el:"#app2",
       data:{
           picked:true
       },
       methods:{
           toggleChecked:function(){
               this.picked = !this.picked;
           }
       }
    });

    var app3 = new Vue({
        el:"#app3",
        data:{
            picked:‘‘
        }
    });

    var app4 = new Vue({
       el:"#app4",
       data:{
           checked:‘‘,//這裏應該是Vue內置的吧，不然真的沒道理...
        //    multichecked:‘‘ 會變為true/false，錯誤寫法
           multichecked:[]
       } 
    });

    var app5 = new Vue({
       el:"#app5",
       data:{
            selected:[‘html‘,‘css‘],//要用ctrl+option的方式多選也是醉了
       }, 
    });

    var app6 = new Vue({
       el:"#app6",
       data:{
            picked:false,
            value:123,//選中時app.picked===app.value
            toggle:false,
            value1:‘a‘,//選中：app.toggle === app.value1，反之value2  這個應該也是自帶的吧...
            value2:‘b‘
       } 
    });

    var app7 = new Vue({
       el:"#app7",
       data:{
            message:‘‘,
            messageNum:‘‘,
            messageTrim:‘‘
       }, 
    });
</script>
</html>

scom utf app console trim charset sel das ini <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

說說 Vue.js 中的 v-model 指令以及如何繫結表單元素

我們可以使用 Vue.js 中的 v-model 指令來完成表單資料的雙向繫結。 1 基礎用法 1.1 文字輸入框（text）這裡演示了在文字輸入框上輸入的內容，會實時對映到繫結的資料上。 html： <div id="app"> <inp

Vue 的（v-model）表單控制元件繫結

v-model 為表單控制元件元素建立資料雙向繫結。（將js變數的值快速設定到控制元件上，然後將使用者輸入內容快速設定回js變數） <!DOCTYPE html> <html lang="en"> <head> <m

Vue2 指令v-on v-model 各種表單控制元件

1.繫結事件指令v-on <div id="app"> <input type="number" v-model="myNumber"> <button v-on:click="add">加1</button&g

vue v-model 與組件化的表單組件如何溝通

field div pla tle ren input 代碼 mod end 參考mint-ui的代碼： https://github.com/ElemeFE/mint-ui/blob/master/packages/radio/src/radio.vue https://

vue.js響應式原理解析與實現—實現v-model與{{}}指令

只需要 spl foreach 形式 pen for 元素節點目標 @param 離線瀏覽器軟件服務器遠程連接 1、可多站同時下載、多站同時扒 2、可單頁扒 3、可自定義，重寫JS\圖片\CSS路徑 4、執行全站下載後，會下載到本程序根目錄下的html文件夾下。

分針網—每日分享：Vue.js事件處理器與表單控件綁定

pan alt default efault mage add ref comm 功能事件處理主要通過v-on這個指令來執行。事件監聽及方法處理 1.簡單的可以直接內嵌在頁面。 2.可以通過將方法定義在methods中，然後再v-on中執行 3

學習使用vue.js（三）條件與迴圈 v-if、 v-for

<——— 在這之前，你肯定會注意到上面箭頭所指的位置，那麼你一定會看見，文章外面的大拇指圖示，動動你的手指，就能點一下它，表示你很喜歡這篇文章。如果你不願意多花時間去自學vue.js 官網的API，那麼你可以在跟著下面的例子學習最實用、最容易上手

vue.js基礎知識篇(8):與服務端通信

add 攔截數據交互 order solid json ise async params vue.js可以構建一個完全不依賴後端服務的應用APP，同時也可以與服務端進行數據交互來同步界面的動態更新。vue-resource實現了基於AJAX、JSONP等技術的服務端通信。

Vue指令7：v-model

mode hit ace pick input -m .com run pac 可以用 v-model 指令在表單控件元素上創建雙向數據綁定。 v-model 會根據控件類型自動選取正確的方法來更新元素。輸入框 <div id="app"> <p&

vue.js響應式原理解析與實現

github 遞歸 val 實現 mode 最新中比 ava 新頁面從很久之前就已經接觸過了angularjs了，當時就已經了解到，angularjs是通過臟檢查來實現數據監測以及頁面更新渲染。之後，再接觸了vue.js，當時也一度很好奇vue.js是如何監測數據更新並

Vue.js前端開發快速入門與專業應用

blank 角度前端介紹實際應用運用 get 指令 http 本書主要介紹 Vue.js 的使用方法和在實際項目中的運用，它既可以在一個頁面中單獨使用，也可以將整站都構建成單頁面應用。為了便於理解，本書會從傳統的開發角度切入，先從數據渲染、事件綁定等方面介紹在 Vu

說說 Vue.js 中的 v-cloak 指令

可以使用 v-cloak 指令設定樣式，這些樣式會在 Vue 例項編譯結束時，從繫結的 HTML 元素上被移除。當網路較慢，網頁還在載入 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 原始碼。我們可以使用 v-cloak 指令來解決這一問題。 h

說說 Vue.js 中的 v-once 指令

被定義了 v-once 指令的元素或元件（包括元素或元件內的所有子孫節點）只能被渲染一次。首次渲染後，即使資料發生變化，也不會被重新渲染。一般用於靜態內容展示。 html： <div id="app"> <div v-once>

說說 Vue.js 中的 v-show 指令

1 用法 v-show 指令通過改變元素的 css 屬性（display）來決定元素是顯示還是隱藏。 html： <div id="app"> <p v-show="type==='科技'">大資料之下的錦鯉：為什麼你的微博總抽不到獎&l

說說 Vue.js 中的 v-on 事件指令

v-on 事件指令用於繫結事件。 1 基礎用法 v-on 指令繫結事件後，就會監聽相應的事件。 html： <div id="app"> <h3>已點選 {{count}} 次</h3> <button @c

說說 Vue.js 中的 v-for 列表渲染指令

1 基本用法當遍歷一個數組或列舉一個物件進行迭代迴圈展示時，就會用到列表渲染指令 v-for。它的表示式需要結合 in 來使用，類似 item in items 的形式。 1.1 遍歷陣列 html： <div id="app"> <u

第二章：表格與表單

文章目錄第一節：表格的使用 ==表格table== ==一個最簡單的表格== ==使用style標籤編寫樣式== ==常用顏色程式碼== 第二節：製作報銷表

Vue某些情況下 v-model繫結資料不實時更新解決辦法

有的時候我們變化data內的內容，console.log列印的時候是顯示已經變化了的，但並沒有渲染到介面上去。受 ES5 的限制，Vue.js 不能檢測到物件屬性的新增或刪除。因為 Vue.js 在初始化例項時將屬性轉為 getter/setter，所以屬性必須

Go語言與html模板、js、css的引用以及表單查詢

引用靜態檔案 Go語言開發中，要在html頁面中引用js、css檔案，以及引用圖片時，必須先做靜態服務，匯入靜態檔案路徑，才能引入，否則一切js、css檔案、圖片都無法呼叫，在編譯器直接執行時，是可以的，但是在啟動專案時，所有js函式、css渲染無效。比如在我的專案根目錄下，有一個名為

Vue.js 章6 v-model與表單

相關推薦