[ADD]表单控件绑定

2020-10-09 19:59:13 +08:00 · 2020-10-09 19:59:13 +08:00 · c5cacb5b99
parent 28649469f4
commit c5cacb5b99
1 changed files with 105 additions and 0 deletions
--- a/表单控件绑定.html
+++ b/表单控件绑定.html
@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title></title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  </head>
+  <body>
+    <!--[if lt IE 7]>
+      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
+    <![endif]-->
+
+    <div id="example-1">
+      <input type="text" v-model="message" placeholder="edit me">
+      <p>Message is: {{message}}</p>
+
+      <span>Multiline message is:</span>
+      <p style="white-space: pre;">{{message}}</p>
+      <br>
+      <textarea v-model="message" placeholder="add multiple lines"></textarea>
+      <br>
+
+      <!-- 单个勾选框 -->
+      <input type="checkbox" id="checkbox" v-model="messageOneChecked">
+      <label for="checkbox">{{messageOneChecked}}</label>
+      <br>
+
+      <!-- 多个勾选框 -->
+      <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>
+      <span>Checked names: {{ checkednames }}</span>
+      <br>
+
+      <!-- 单选按钮 -->
+      <input type="radio" id="one" value="One" v-model="picked">
+      <label for="one">One</label>
+      <input type="radio" id="two" value="Two" v-model="picked">
+      <label for="two">Two</label>
+      <br>
+
+      <!-- 单选列表 -->
+      <select v-model="selected">
+        <option>A</option>
+        <option>B</option>
+        <option>C</option>
+      </select>
+      <span>Selected: {{selected}}</span>
+      <br>
+
+      <!-- 多选列表 -->
+      <select v-model="multipleSelected" multiple>
+        <option>A</option>
+        <option>B</option>
+        <option>C</option>
+      </select>
+      <br>
+      <span>Selected: {{ multipleSelected }}</span>
+      <br>
+      
+      <!-- 动态选项 -->
+      <select v-model="dynamicSelected">
+        <option v-for="option in options" v-bind:value="option.value">
+          {{option.text}}
+        </option>
+      </select>
+      <span>Selected: {{dynamicSelected}} </span>
+    </div>
+
+    
+    <script>
+      var example1 = new Vue({
+        el: '#example-1',
+        data: {
+          message: '',
+          messageOneChecked: true,
+          checkednames: [],
+          picked: '',
+          selected: '',
+          multipleSelected: [],
+          dynamicSelected: '',
+          options: [
+            { text: 'One', value: 'A'},
+            { text: 'Two', value: 'B'},
+            { text: 'Three', value: 'C'}
+          ]
+        }
+      })
+
+     
+    </script>
+  </body>
+</html>