Vue学习day04--v-model和双向数据绑定

最新推荐文章于 2021-10-13 19:54:55 发布

不熬夜的程序猿

最新推荐文章于 2021-10-13 19:54:55 发布

阅读量227

点赞数

分类专栏： vue.js学习

本文链接：https://blog.csdn.net/No_overtime_apes/article/details/105130791

版权

vue.js学习专栏收录该内容

7 篇文章 1 订阅

订阅专栏

1、v-model指令只能用到表单元素中。实现双向数据绑定。

表单元素：input(raido/text/address/email....)、select、checkbox、textarea

<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
    <script>
        //vm实例中，获取data上的数据，或者获取methods中的方法，使用this。this.属性名，this.方法名。
        // this就表示我们new出来的vm对象
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'开始你的表演--'
            },
            methods:{

            }
        })
    </script>
</body>

2、数据双向绑定实现，计算器案例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue学习day04</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="a1">
        <select v-model="c1">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="b1">
        <input type="button" value="=" @click="cal">
        <input type="text" v-model="ret">

    </div>
    <script>
        //vm实例中，获取data上的数据，或者获取methods中的方法，使用this。this.属性名，this.方法名。
        // this就表示我们new出来的vm对象
        var vm = new Vue({
            el:"#app",
            data:{
                a1:0,
                b1:0,
                c1:"+",
                ret:0
            },
            methods:{
                cal:function(){
                    switch (this.c1){
                        case '+':
                                this.ret=parseInt(this.a1) + parseInt(this.b1)
                            alert(parseInt(this.a1) + parseInt(this.b1))
                        break;
                        case '-':
                            this.ret=parseInt(this.a1)-parseInt(this.b1)
                        break;
                        case '*':
                            this.ret=parseInt(this.a1)*parseInt(this.b1)
                        break;
                        case '/':
                            this.ret=parseInt(this.a1)/parseInt(this.b1)
                        break;
                    }
                }
            }
        })
    </script>
</body>
</html>

3.效果图