欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页

Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】

程序员文章站 2022-05-29 23:12:35

...

目录

原生JS实现异步表单提交

单选框、密码框、多行文本框

下拉列表（每个option标签都要有value值）

组件汇总案例

JS堆栈内存图

2、计算属性（对data中的数据进行加工处理）

computed-案例

3、watch监听（监听data中数据变化）

1、Vue表单

Vue.js表单是 双向数据绑定的。

原生JS实现异步表单提交

运行截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>01、原生JS实现异步表单提交</title>
</head>

<body>
    <!-- 如果是异步提交，就可以不需要使用form标签 -->
    <p>姓名： <input type="text"> </p>
    <p>密码： <input type="password"></p>
    <button>提交</button>

    <!-- 传统同步模式 action：服务器处理地址-->
    <form action="">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit">
    </form>
</body>
<script>
    var btn = document.getElementsByTagName("button")[0];
    var ipt = document.getElementsByTagName("input");
    btn.onclick = function () {
        console.log(ipt[0].value)
        console.log(ipt[1].value)
    }
    // 如果字段多， 获取字段值很麻烦，且 数据回显
</script>

</html>

核心指令

<标签控件 v-model="变量" />

单选框、密码框、多行文本框

<input type="text" v-model="变量" />

<input type="password" v-model="变量" />

<textarea v-model="变量"></textarea>

单选

变量获取到的数据就是控件的value值，如果变量绑定的数据和控件的value值⼀致，则该单选控件被选中。

<input type="radio" v-model="变量" value="值1" />
<input type="radio" v-model="变量" value="值2" />
<input type="radio" v-model="变量" value="值3" />

data:{
    变量:值2 // 值2的控件将会被选中
}

多选

<input type="checkbox" v-model="变量" value="值1" />
<input type="checkbox" v-model="变量" value="值2" />
<input type="checkbox" v-model="变量" value="值3" />

data:{
    变量:[值1] // 绑定的变量是⼀个数组！ 值1的控件将会选中
}

勾选

<input type="checkbox" v-model="变量" />

data:{
    变量:布尔值
}

下拉列表（每个option标签都要有value值）

<select v-model="变量">
     <option value="值1">111</option>
     <option value="值2">222</option>
     <option value="值3">333</option>
</select>

data:{
    变量:值2 // 值2的option控件被选中
}

组件汇总案例

运行截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>02、Vue表单</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <p>姓名：<input type="text" v-model="userinfo.username">{{userinfo.username}}</p>
        <p>密码：<input type="password" v-model="userinfo.password">{{userinfo.password}}</p>
        <p>
            性别：
            <!-- 作为单选控件的时候，需要给每个控件一个 value值！ -->
            <label><input type="radio" value="1" v-model="userinfo.sex">男</label>
            <label><input type="radio" value="0" v-model="userinfo.sex">女</label>
            {{userinfo.sex}}
        </p>
        <p>
            爱好：
            <!-- 作多选的时候，每个多选控件，也需要有value值，作为提交的数据  -->
            <label><input type="checkbox" value="lq" v-model="userinfo.ah">篮球</label>
            <label><input type="checkbox" value="zq" v-model="userinfo.ah">足球</label>
            <label><input type="checkbox" value="ymq" v-model="userinfo.ah">羽毛球</label>
            <label><input type="checkbox" value="pq" v-model="userinfo.ah">皮球</label>
            {{userinfo.ah}}
        </p>
        <p>
            是否同意协议：
            <!-- 作勾选的时候，绑定的变量只需要是一个布尔值即可！ -->
            <label><input type="checkbox" v-model="userinfo.agree">xxxxx协议内容，是否同意</label>
            {{userinfo.agree}}
        </p>
        <p>
            家乡：
            <!-- 多选，每个option都绑定上一个value -->
            <select v-model="userinfo.city">
                <option value="">==请选择==</option>
                <option value="zhengzhou">郑州</option>
                <option value="nanying">南阳</option>
                <option value="anyang">安阳</option>
                <option value="xinyang">信阳</option>
                <option value="luoyang">洛阳</option>
            </select>
            {{userinfo.city}}
        </p>
        <p>
            留言：
            <textarea v-model="userinfo.note"></textarea>
            {{userinfo.note}}
        </p>
        <button @click="reg">提交</button>
    </div>
</body>
<script>
    // 核心指令内容： v-model    
    // vue.js 受欢迎的原因就在于表单的双向数据绑定！
    new Vue({
        el: "#app",
        data: {
            userinfo: {
                username: "1",
                password: "2",
                sex: 1,   // 1 男  0  女
                ah: ['zq', 'pq'],   // 如果多选的话，绑定需要是一个数组
                agree: false,
                city: "",
                note: ""
            }
        },
        methods: {
            reg() {
                console.log("要去注册了")
                console.log(this.userinfo)
            }
        }
    })
    // 获取表单数据 变得简单了！
    // 从表单获取数据---赋值--->userinfo.username
</script>

</html>

ToDoList案例

JS堆栈内存图

基本数据类型 字符串、数字、布尔值、null、undefined 栈内存

引用数据类型 object/array 堆内存

运行截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>03、ToDoList</title>
    <script src="vue.js"></script>
    <style>
        #app {
            text-align: center;
        }

        .form {
            background-color: orange;
            padding: 20px;
            display: inline-block;
            border-radius: 5px;
        }

        .table,
        td,
        th {
            border: 1px solid orange;
            width: 900px;
            margin: 30px auto;
        }

        td,
        th {
            padding: 5px;
        }

        .bg {
            background-color: orange;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="form">
            主题：<input type="text" v-model="item.title">
            地点：<input type="text" v-model="item.pos">
            时间：<input type="date" v-model="item.time">
            <button @click="submitAdd" v-if="act=='add'">提交</button>
            <button @click="submitEdit" v-if="act=='edit'">修改</button>
        </div>

        <table class="table">
            <tr class="top">
                <th>序号</th>
                <th>主题</th>
                <th>地点</th>
                <th>时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <template v-if="list.length">
                <!-- v-if、v-for 不能同时在一个标签内。 
                 template : 辅助功能，无渲染效果。 -->
                <tr v-for="(val, idx) in list" :class="val.status ? 'bg':'' ">
                    <td>{{idx+1}}</td>
                    <td>{{val.title}}</td>
                    <td>{{val.pos}}</td>
                    <td>{{val.time}}</td>
                    <td>{{val.status ? '完成':'未完成'}}</td>
                    <td>
                        <button @click="finish(val)" v-if="val.status==0">完成</button>
                        <button @click="edit(val, idx)">修改</button>
                        <button @click="del(idx)">删除</button>
                    </td>
                </tr>
            </template>
            <tr v-else>
                <td colspan="6">
                    <br>
                    暂无数据
                    <br><br>
                </td>
            </tr>
        </table>
    </div>
</body>

<script>
    new Vue({
        el: "#app",
        data: {
            list: [],
            item: {
                title: "",
                pos: "",
                time: "",
                status: 0   // 0表示 未完成 ; 1表示已完成
            },
            act: "add",    // 提交的类型！
            editIdx: "",   // 修改的下标
        },
        methods: {
            submitAdd() {  // 添加提交
                if (this.item.title && this.item.pos && this.item.time) {
                    // 将数据放入到list中
                    // 拷贝一份和this.item完全一致的数据，放进去
                    // Object.assign(对象A，对象B)  将对象B合并到对象A里面去。拷贝
                    this.list.push(Object.assign({}, this.item))

                    // 数据还原！
                    this.item.title = this.item.pos = this.item.time = ""
                    this.item.status = 0;
                } else {
                    alert("请输入完整数据！")
                }
            },
            submitEdit() {  // 修改提交
                if (this.item.title && this.item.pos && this.item.time) {
                    let newdata = Object.assign({}, this.item);
                    // 找修改的那个下标，将新的数据替换了！
                    console.log(this.editIdx)
                    this.list[this.editIdx] = newdata;

                    // 数据还原！
                    this.item.title = this.item.pos = this.item.time = ""
                    this.item.status = 0;
                    this.act = "add"
                    this.editIdx = ""
                } else {
                    alert("请输入完整数据！")
                }
            },
            finish(v) {
                v.status = 1;
            },
            edit(v, i) {
                console.log(v)
                console.log(i)
                this.editIdx = i;  // 将下标放在data里面的editIdx变量！
                this.act = "edit"
                this.item = Object.assign({}, v);  // 数据回显！
            },
            del(i) {
                this.list.splice(i, 1) // 删除数据
            }
        }
    })

    
    /////////////   引用数据类型的特点   //////////////
    var aa = 20;
    var bb = aa;
    bb += 20;
    console.log(aa)  // 20
    console.log(bb)  // 40


    var p1 = {
        name: "张飞",
        age: 20
    }
    var p2 = p1; // 引用地址
    p2.age += 10;
    console.log(p1.age)   //  30
    console.log(p2.age)   //  30

// JS
    // 基本数据类型  字符串、数字、布尔值、null、undefined   栈内存
    // 引用数据类型  object/array           堆内存
</script>

</html>

2、计算属性（对data中的数据进行加工处理）

实现

计算属性的值为函数，且这个函数需要有返回值！

将数据处理好之后，赋给全局变量，再进行显示。

new Vue({
    el: "",
    data: {},
    computed: {
        属性名: function(){
            return xxx;
        }
    }
})

computed-计算属性案例

运行截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>04、计算属性</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        {{abc}}
        <br>
        {{money}}
        <hr>
        {{"￥"+num}}
    </div>
</body>
<script>
    // 计算属性
    // 计算     属性  
    // 动词     名词   语文角度

    // 计算属性本质是属性！ 只不过需要计算得到！
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "你好",
            age: 20,
            num: 2000
        },
        computed: {
            abc: function () {  // 值是一个函数，且这个函数有return返回值内容！
                return this.msg + this.age
            },
            money: function () {
                return "￥" + this.num
            }
        }
    })
    console.log(vm)    
</script>

</html>

3、watch监听（监听data中数据变化）

实现

new Vue({
    el: "",
    data: {
        变量名:值
    },
    watch: {
        // 浅监听： 监听的变量数据类型是基本数据类型
        变量名: function(新值){
            ....
        }
        // 深监听： 监听的变量数据类型是引⽤数据类型
        变量名: {
            deep: true,
            handler: function(新值){
                ...
            }
        }

    }
})

案例

运行截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>05、watch使用</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <span>单价是：￥10.00</span>
        <span>数量是：{{num}}</span>
        <!-- <span>小计：￥{{ num*10 }}</span> -->
        <span>小计：￥{{ total }}</span>
        <button @click="add">累加</button>
        <hr>
        {{person}}
    </div>
</body>
<script>
    // 需要一个监听者，监听某个数据的变化！
    new Vue({
        el: "#app",
        data: {
            num: 1,
            total: "10.00",
            person: {
                name: "张飞",
                age: 20
            }
        },
        methods: {
            add() {
                this.num++  // 数量变化！
                this.person.age++  // 年纪也变化！
            }
        },
        watch: {
            // 浅监听
            // 只要num发生变化，此函数将自动执行
            num: function (newval) { // 形参newnal
                console.log(newval)
                this.total = newval * 10
            },

            // 深监听-->对象
            // 无法检测变化的，因为引用地址没有变化！
            // person:function(newval){
            //     console.log(newval)
            // }
            person: {
                deep: true,
                handler: function (newval) {
                    console.log(newval)
                }
            }
        }
    })
    // 监听分类两种：
        // 浅监听：  监听的是基本数据类型！
        // 深监听：  监听的是引用数据类型！
</script>

</html>

多谢观看~

相关标签： Vue.js（前端框架） checkbox 堆栈 vue js javascript

上一篇： vue 引入tinymce富文本框

下一篇：利用formData，在使用form表单提交参数(或者文件)时，处理回调函数

推荐阅读

Vue.js-Day02-AM【Vue表单、核心指令（单选框、密码框、多行文本框、单选、多选、勾选、下拉列表）、组件汇总案例、ToDoList案例、计算属性(computed)、watch监听】