1.v-model可以实现页面数据与Vue实例化对象中的data数据实现双向绑定

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
</head>
<body>

    <div id="app">

        <!-- v-model实现数据双向绑定 -->
  
        <form action="">
            <!-- 普通写法 -->
            <input type="text" :value="myval" @input="myinput" />
            <h1>{{myval}}</h1>
            <hr />
            <!-- vue的双向绑定写法  data和表单双向绑定 -->
            <input type="text" v-model="myval2" />
            <h1>{{myval2}}</h1>
        </form>

        <hr>
        <!-- 多行文本双向绑定 -->
        <textarea v-model="text" name="" id="" cols="30" rows="10"></textarea>
        <h1>{{text}}</h1>
        <hr>
        <!-- 复选按钮双向绑定 -->
        <input type="checkbox" v-model="checked" id="myChecked">
        <label for="myChecked">是否同意用户协议</label><!-- 当点击文字的时候也可以更换绑定 -->
        <h1>{{checked}}</h1>
        <div v-show="checked" style="width: 120px;height: 30px;background: pink;text-align: center;
        line-height: 30px;color: #fff;">下一步</div>
  
        <!-- 复选框多选 -->
        <hr>
        爱好:
        <label><input v-model="arr" type="checkbox" value="chang">唱歌</label>
        <label><input v-model="arr" type="checkbox" value="tiao">跳舞</label>
        <label><input v-model="arr" type="checkbox" value="qiu">打篮球</label>
        <label><input v-model="arr" type="checkbox" value="rap">rap</label>
        <h1>{{arr}}</h1>


        <!-- 下拉框 -->
        <hr>
        <select v-model="selected">
            <option value="gz">高中</option>
            <option value="zk">专科</option>
            <option value="bk">本科</option>
            <option value="yjs">研究生</option>
        </select>
        <h1>{{selected}}</h1>

        <!-- 清除用户输入的空格 -->
        <hr>
        <input type="text" v-model.trim="name" @input="myIpt">
        <h1>{{name}}</h1>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                myval: "普通写法",
                myval2: "vue双向绑定写法",
                text: "",
                checked: false,
                arr: ["chang"],
                selected: "gz",
                name:""
            },
            methods: {
                myinput(e){
                    // console.log(e.target.value);
                    this.myval = e.target.value;
                },
                myIpt(){
                    console.log(this.name);
                }
            }
        })
    </script>
</body>
</html>

1.2 显示效果

1.3 在线演示

点击下面链接,即可在线运行

http://www.68yun.top/demo/vue/1.7.html

最后修改:2021 年 02 月 20 日 10 : 03 AM