vue之v-model数据双向绑定

最新推荐文章于 2023-03-15 10:06:13 发布

一路向北⁢

最新推荐文章于 2023-03-15 10:06:13 发布

阅读量565

点赞数

分类专栏： Vue 文章标签： vue vue-model vue数据双向绑定

本文链接：https://blog.csdn.net/suprezheng/article/details/84933221

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

以下是vue.js中 v-model数据的双向绑定demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue demo</title>
    <!--引入vue 依赖项-->
    <script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
    <div id="myVue">

        <!--input 双向绑定-->
        name绑定的值：{{name}}<br/>
        <input type="text" v-model="name"/><br/>

        <!--CheckBox-->
        hobbys绑定的值:{{hobbys}}
        <br/>
        打篮球：<input type="checkbox" v-model="hobbys" value="打篮球"/>
        打排球：<input type="checkbox" v-model="hobbys" value="打排球"/><br/>

        sexChoice绑定的值:{{sexChoice}}
        <br/>
        男：<input type="radio" name="sex" v-model="sexChoice" value="男"/>
        女：<input type="radio" name="sex" v-model="sexChoice" value="女"/>
        <br/>

        skill绑定的值：{{skill}}
        <br/>
        <select v-model="skill">
            <option value="空">请选中</option>
            <option value="java">java工程</option>
            <option value="ui">美工师</option>
            <option value="html">前端</option>
        </select>
    </div>

    <script>
        /*定义Vue全局变量*/
        var app = new Vue({
            el:"#myVue",
            data:{
                "name":"helloWord",
                age:22,
                hobbys:["打篮球"],
                sexChoice:"男",
                skill:"java"
            }
        });
    </script>
</body>
</html>

结果：
在这里插入图片描述

一路向北⁢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之v-model数据双向绑定

以下是vue.js中 v-model数据的双向绑定demo:&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue demo&lt;/title&gt; &lt;!--引入vue 依赖项--
复制链接

扫一扫