<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="app"> <!--选择一个 与value值进行绑定--> <select name="abc" id="" v-model="fruit"> <option value="苹果1" >苹果1</option> <option value="苹果2" >苹果2</option> <option value="苹果3" >苹果3</option> <option value="苹果4" >苹果4</option> <option value="苹果5" >苹果5</option> </select> <br> <!--多选框--> <select name="abc" v-model="fruits" multiple> <option value="苹果1" >苹果1</option> <option value="苹果2" >苹果2</option> <option value="苹果3" >苹果3</option> <option value="苹果4" >苹果4</option> <option value="苹果5" >苹果5</option> </select> <h2>{{fruits}}</h2> <p>======================================</p> <!--避免写死，后端服务器需要传递出来列表然后遍历出来--> <label v-for="item in originals"> <input type="checkbox" :value="item" v-model="fruits">{{item}} </label> </div><script src="vue.js"></script><script> const app=new Vue({ el:'#app', data:{ fruit:"苹果3", fruits:[], originals:["篮球","足球","羽毛球","乒乓球"] }, methods:{ } })</script></body></html>v-bind 的应用
来源：https://www.cnblogs.com/Damocless/p/11913429.html