Vue双向绑定v-model

织梦狗教程前端开发

2023-10-08

Vue双向绑定model!DOCTYPE htmlhtmlheadmeta charset=utf-8title/titlescript src=js/vue.js type=text/javascript charset=utf-8/script/headbodydiv id=f1{{m}}!--文本框测试--...

Vue双向绑定model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="f1">
            {{m}}
            <!--文本框测试-->
            <br>
            <input type="text" name="" id="" value="" v-model="m" />
            <!--文本域测试-->
            <br>
            <textarea rows="5" cols="10" v-model="m" ></textarea>
            <!--单选按钮测试-->
            <br>
            男：<input type="radio" name="sex" id="" value="男" v-model="sexs"/>
            女：<input type="radio" name="sex" id="" value="女" v-model="sexs"/>
            <br>选中了：{{sexs}}
            <br>
            <!--下拉框测试-->
            <select name="" v-model="selects">
                <option value="A">A</option>
                <option value="B">B</option>
                <option value="C">C</option>
            </select>
            选择：{{selects}}
        </div>
        
        <script type="text/javascript">    
            var ns1 = new Vue({
                el:"#f1",
                data:{
                    m:"你好",
                    checked:false,
                    sexs:"",
                    selects:"",
                }
            });
        </script>
    </body>
</html>

织梦狗教程

本文标题为：Vue双向绑定v-model