이번에는 vue.js의 v-model 명령을 사용하여 양방향 데이터 바인딩을 구현하는 방법을 보여 드리겠습니다. vue에서 v-model 명령을 사용하여 양방향 데이터 바인딩을 구현하는 데 사용할 주의 사항은 무엇입니까? .js 다음은 실제 사례를 살펴보겠습니다.
vue.js의 주요 기능은 데이터의 양방향 바인딩을 실현하는 것입니다. 이 기사에서는 양식 처리 중 양방향 바인딩을 실현하기 위해 v-model 명령을 사용하는 방법을 소개합니다.
v-model 명령은 ,
app.html
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> vuejs v-model 数据双向绑定 </title> <style type="text/css"> [v-cloak] { display: none } </style> </head> <body> <p id="app"> <form> 姓名: <input type="text" v-model="data.name" placeholder="姓名"/> <br /> 性别: <input type="radio" id="one" value="One" v-model="data.sex"/> <label for="man">男</label> <input type="radio" id="two" value="Two" v-model="data.sex"/> <label for="male">女</label> <br /> <input type="checkbox" id="jack" value="book" v-model="data.interest"/> <label for="jack">阅读</label> <input type="checkbox" id="john" value="swim" v-model="data.interest"/> <label for="john">游泳</label> <input type="checkbox" id="move" value="game" v-model="data.interest"/> <label for="move">游戏</label> <input type="checkbox" id="mike" value="song" v-model="data.interest"/> <label for="mike">唱歌</label> <br /> 身份: <select v-model="data.identity"> <option value="teacher" selected>教师</option> <option value="doctor">医生</option> <option value="lawyer">律师</option> </select> </form> <p><pre class="brush:php;toolbar:false">data: {{$data | json 2}}