Cette fois, je vais vous montrer comment utiliser l'instruction v-model dans vue.js pour réaliser une liaison de données bidirectionnelle. Quelles sont les précautions concernant l'utilisation de l'instruction v-model dans vue.js. pour réaliser une liaison de données bidirectionnelle, ce qui suit est un cas pratique, jetons un coup d'œil.
Une fonction majeure de vue.js est de réaliser une liaison bidirectionnelle des données. Cet article présentera l'utilisation des instructions du modèle V pour réaliser une liaison bidirectionnelle lors du traitement du formulaire :
v-model ces instructions ne peuvent être utilisées que sur des éléments de formulaire tels que ,
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}}