vue表單輸入繫結v-model

v-model指令在表單<input>、<textarea>及<select>元素上建立雙向資料繫結，它會根據控制元件型別自動選取正確的方法來更新元素。v-model本質上是語法糖。它將轉換為輸入事件以更新資料，並對一些極端場景進行一些特殊處理。

<p><input type="text" v-model = "course">{{course}}</p>

<!DOCTYPE html>
<html lang="en">
<head> 

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>購物車</title>
    <script src="vue.js"></script>
</head>
<body>
    <!-- 宿主檔案 -->
    <!-- {{ mustache }}是一個動態的值 左右就用雙括號{{}}--> 

    <!-- 插值文字 -->
    <!-- v-once執行一次性插值 之後值變了動態值不變 -->
    <div id= "app">
        <h2 :title="title">
            {{ title }}    
        </h2>
        <!-- 使用者輸入 -->
        <p><input type="text" v-model = "course">{{course}}</ 
p>
        <!-- 列表渲染 --> 
        <div v-for="c in courses" :key="c"> 
            {{ c }}
        </div>
    </div>
    <script>
        // 1.建立vue例項
        // 儲存vue例項
        const app = new Vue({
            // 交代宿主是誰
            el:"#app",
            data: {
                title: '課程：',
                course:"",
                courses:["黃帝內經","仲景心法","鍼灸","傷寒","金匱"],
            }
        })
        
    </script>
</body>
</html>

在這裡插入圖片描述

vue表單輸入繫結v-model

vue表單輸入繫結v-model

Vue 表單輸入繫結v-model

Vue（10）表單輸入繫結v-model

VUE學習十九，表單輸入繫結v-model

Vue.js 條件渲染、列表渲染、事件處理、表單輸入繫結基本使用

遇見 vue.js --------阿文的vue.js學習筆記（10）------表單輸入繫結

vue實戰學習教程3-表單輸入繫結

Vue 給子元件繫結v-model

9. 表單輸入繫結

無法繫結到目標控制元件的屬性“checked”。_Vue 3 表單輸入繫結

表單輸入繫結的學習

vue3 表單輸入繫結

vue3.x 表單輸入繫結

淺談vue實現雙向事件繫結v-model的原理

表單輸入繫結

petite-vue原始碼剖析-雙向繫結`v-model`的工作原理

10、Vuejs 3 —— 表單輸入繫結

VUE學習日記（十三） ---- 資料繫結v-model（表單：下拉框）

VUE學習六，表單和應用雙向繫結v-model

雙向繫結v-model與表單元素，修飾符.lazy,.number,.trim

vue表單輸入繫結v-model

相關推薦