最基础的就是实现一个联动的效果

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">jacklabel>
    input type="checkbox" id="John" value="John" v-model="checkedNames">
    label for="jack">Johnlabel>
    input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
    label for="jack">Mikelabel>
    br>
    span>Checked names:{{checkedNames}}span>
  div>
   
body>
script>
  new Vue({
     el:'.app',
     data:{
       checkedNames:[]
     }
  })
script>

v-bind

有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性

结语

感谢您的观看，如有不足之处，欢迎批评指正。