双向绑定事件

当表单、文本域的内容发生改变或者是单选框、复选框、下拉框被选中的时候data里边的数据也会发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
</head>
<body>

    <div id="app">
        <h3><font color="red"> 输入框：</font></h3>
       <input type="text" v-model="message"/>{
   
   {message}}

        <h3><font color="orange"> 文本域：</font> </h3>
       <textarea cols="30" rows="10" v-model="message1"></textarea>{
   
   {message1}}

        <h3><font color="green"> 单选框：</font> </h3>
        性别：<input type="radio" name="sex" value="♂" v-model="sex" checked/>男
        <input type="radio" name="sex" value="♀" v-model="sex"/>女
        <p>选中了：{
   
   {sex}}</p>

        <h3><font color="blue"> 多选框：</font> </h3>
        爱好：<input type="checkbox" name="hobby" value="running" v-model="hobbies"/>跑步
        <input type="checkbox" name="hobby" value="game" v-model="hobbies" />游戏
        <input type="checkbox" name="hobby" value="shopping" v-model="hobbies" />购物
        <p>选中了：{
   
   {hobbies}}</p>

        <h3><font color="#00ffff"> 下拉框：</font> </h3>
        <select v-model="selected">
            <option disabled value="">---请选择---</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <p>选中了：{
   
   {selected}}</p>

    </div>

    <!--引入vue的cdn-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
      
      
            el: "#app",
            data: {
      
      
                message: "",
                message1: "",
                sex: "",
                hobbies:[
                ],
                selected: ""
            }
        });
    </script>

</body>
</html>

结果如下

在这里插入图片描述

Guess you like