绑定事件
-
点击事件
<div id="app"> <button v-on:click="hello">hello</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data: { message: "hello vue" }, methods: { hello: function () { alert(this.message) } } }); </script>
-
双向绑定显示输入的数据
<div id="app"> 请输入:<input type="text" v-model="message">{{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data: { message: "" } }); </script>
-
单选框和下拉框
<div id="app"> 单选框: <br/> 选择你喜欢的水果: <input type="radio" name="fruits" value="苹果" v-model="fav">苹果 <input type="radio" name="fruits" value="香蕉" v-model="fav">香蕉 <input type="radio" name="fruits" value="桃子" v-model="fav">桃子 <br/><br/> 下拉框: <br/> 选择你喜欢的水果: <select name="fruits" v-model="fav"> <!-- <option value="" disabled>请选择</option>--> <option>苹果</option> <option>香蕉</option> <option>桃子</option> </select> <p> 被选中的水果:{{fav}} </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script> <script> var vm = new Vue({ el: "#app", data: { fav: "", } }); </script>