Vuejs004---v-model 指令实现双向数据绑定_vue中的双向数据绑定通过使 v-model 指令实现-CSDN博客

本文链接：https://blog.csdn.net/rngigskt/article/details/119881839

一：使用 v-model 指令实现双向数据绑定

1. v-bind

2.双向数据绑定v-model

一：使用 v-model 指令实现双向数据绑定

1. v-bind

我们可以对 v-bind 的绑定数据的形式得出一个结论， v-bind 只能实现数据的单向绑定，

从模型（M ）绑定到视图（ V ），使用 VM 将数据去渲染视图，但是我们无法通过该形式实现数据的双向绑定。

2.双向数据绑定v-model

在实际项目开发中，不仅仅只是将模型准确的渲染到视图中，视图中的数据的变化，更需要模型去进行有效的记录。所以我们需要使用双向数据绑定的机制。

（ 1 ） v-model 的基本使用

使用 v-model 可以对数据进行双向的绑定操作。

值得注意的是，由于记载页面元素值的需求都是发生在表单元素中，所以 v-model 只能运用在表单元素中。

form

<input> 系列 type:text,hidden,checkbox,radio....

...

（2）使用 v-model 实现简单的计算器功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 引入vuejs框架 -->
    <script src="./lib/vue-2.4.0.js"></script>
    
</head>
<body>
    
    <div id="app">
        
        <input type="text" v-model="num1"/>
        
        <select v-model="csign">

            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>

        </select>

        <input type="text" v-model="num2"/>

        <input type="button" value="=" @click="count"/>

        <input type="text" v-model="result"/>

    </div>
    


    <script>
    
       

        var vm = new Vue({

            el : "#app",    
            data : {
                num1 : 0,
                num2 : 0,
                csign : "+",
                result : 0

            },
            //methods:表示vuejs中对于绑定事件函数的定义，可以同时定义多个函数，多个函数之间使用逗号来进行分隔
            methods:{

                count(){

                    if(this.csign=="+"){


                        //直接取得的数值暂时是不能够直接计算的，默认的情况会按照字符串拼接的形式来触发+符号
                        //默认拼接字符串： 1+1=11
                        //在做数学计算之前，需要将数值格式化，才能够计算，使用parseInt方法做数值格式化的操作
                        this.result = parseInt(this.num1)+parseInt(this.num2); 

                    }else if(this.csign=="-"){

                        this.result = parseInt(this.num1)-parseInt(this.num2); 
                        
                    }else if(this.csign=="*"){

                        this.result = parseInt(this.num1)*parseInt(this.num2); 
                        
                    }else if(this.csign=="/"){

                        this.result = parseInt(this.num1)/parseInt(this.num2); 
                                            
                    }

                }
                

            }

        });

    </script>

</body>
</html>