Vue---組件

  • v-modul:自動將Vue實例中定義的屬性與Dom表單組件的vaule屬性進行綁定。
    • radio:默認與其邏輯值綁定,即:選定:true、取消選定:false,除非設置了value屬性。
    • checkbox:對應的vue.data.someAttribute是一個Array類型,并會自動插入和刪除數組元素
      • 如果:checkbox中設置了:v-model="toggle" v-bind:true-value="a" v-bind:false-value="b";
        vue實例中設置了:toggle:'', a:'ValueA',b='ValueB',那么選中的時候:toggle=ValueA,反之為'ValueB'
      • 如果:checkbox 中設置了:value="checkboxValue",v-model="toggle";
        vue實例中設置了:toggle :[],那么選中的時候:toggle=['checkboxValue'],反之為:toggle=[]
      • 如果:checkbox中設置了:v-model='toggle' ,vue實例中設置了:toggle:"",那么選中的時候:toggle=true,反之為:false;
    • select:如果沒有設置value屬性,則默認取text值。
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./js/vue.js"></script>
</head>
<body>
   <div id="app">
      
       <fieldset>
           <legend>Input:</legend>
           <input type="text" v-model="inputVal">
           lazyInput : <input type="text" v-model.lazy="inputValLazy" />
           <br>
           <p>Input: {{ inputVal }}</p>
           <p>inputValLazy: {{ inputValLazy }}</p>
       </fieldset>
       <fieldset>
           <legend>Checkbox:</legend>
           <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
           <label for="jack">Jack</label>
           <input type="checkbox" id="john" value="John" v-model="checkedNames">
           <label for="john">John</label>
           <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
           <label for="mike">Mike</label>
           <br>
           <p>checkbox: {{ checkedNames }}</p>
       </fieldset>
        
       <fieldset>
           <legend>Radio:</legend>
           <input type="radio" id="one" value="One" v-model="picked">
           <label for="one">One</label>
           <br>
           <input type="radio" id="two" value="Two" v-model="picked">
           <label for="two">Two</label>
           <br>
           <p>radio: {{ picked }}</p>
       </fieldset>

       <fieldset>
           <legend>Select:</legend>
           <select v-model="selected">
               <option value="">---請選擇---</option>
               <option value="A:這個是通過value設置的值">A</option>
               <option>B:這個沒有設置value屬性,所以直接取了text</option>
               <option value="選了C">C</option>
               </select>
               <br>
           <span>Selected: {{ selected }}</span>
       </fieldset>
   </div>
<script>
    
   const vm = new Vue({
       el   : '#app',
       data : {
           inputVal    : '',
           inputValLazy : '',
           checkedNames: [],
           picked : '',
           selected : ''
       }
   });
</script>
</body>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 此文基于官方文檔,里面部分例子有改動,加上了一些自己的理解 什么是組件? 組件(Component)是 Vue.j...
    陸志均閱讀 3,846評論 5 14
  • 在這一節里,我們將會了解到Vue的組件,理解組件是如何工作的,并利用一系列的例子證明,用組件化的思想開發項目,會給...
    嘉寶_Appian閱讀 3,278評論 6 17
  • 什么是Vue組件 組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素,...
    bacbcc94613b閱讀 977評論 0 0
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,837評論 18 139
  • 軟件編程界有一個面相對象的思想, 或者用另一句話就是為實例寫模板, 初始化的時候調用模板(類)生成實例, 進行抽象...
    烈風裘閱讀 4,166評論 0 11