v-model 指令在表单控件元素上创建双向数据绑定, 所谓双向绑定, 指的就是我们在 JS 中的 vue 实例中的 data 与其渲染的 dom 元素上的内容保持一致, 两者无论谁被改变, 另一方也会相应的更新为相同的数据
最基础的就是实现一个联动的效果
- <body>
- <div class="app">
- <span>Multiline message is:</span>
- <p>{{message}}</p>
- <br>
- <textarea name=""v-model="message"placeholder="please write..."></textarea>
- </div>
- </body>
- <script>
- new Vue({
- el:'.app'
- })
- </script>
- checkbox
- <body>
- <div class="app">
- <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="jack">John</label>
- <input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
- <label for="jack">Mike</label>
- <br>
- <span>Checked names:{{checkedNames}}</span>
- </div>
- </body>
- <script>
- new Vue({
- el:'.app',
- data:{
- checkedNames:[]
- }
- })
- </script>
- v-bind
有些指令可以在其名称后面带一个 "参数" (Argument), 中间放一个冒号隔开. 例如, v-bind 指令用于响应地更新 html 特性
来源: http://www.qdfuns.com/article/51117/0d0f881f53d88522c376d7f26dde8def.html