Vue v-model数据双向绑定_el-input v-model 设置固定值-优快云博客

本文链接：https://blog.youkuaiyun.com/zzzlln/article/details/122311693

本文探讨Vue.js的v-model特性，用于实现数据的双向绑定，尤其在表单控件中的应用。通过实例展示了如何创建一个计算器功能，结合代码与实际效果，深入理解v-model的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：数据双向绑定

注意：绑定的是表单控件

实现了计算器功能代码与效果如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
</head>
<body>
    <div id='app'>
        <!-- 计算器： -->
        <input type="text" v-model:value="num1"> 
        <select name="" id="" v-model="operator" >
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text"  v-model:value="num2">
        <button @click="sum">=</button>
        <input type="text"  v-model="num3">
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            num1:"",
            num2:"",
            num3:"",
            operator:""
        },
        methods: {
            sum(){
                if(this.operator=='+'){
                    this.num3 = Number(this.num1) + Number(this.num2)
                }
                if(this.operator=='-'){
                    this.num3 = Number(this.num1) - Number(this.num2)
                }
                if(this.operator=='*'){
                    this.num3 = Number(this.num1) * Number(this.num2)
                }
                if(this.operator=='/'){
                    this.num3 = Number(this.num1) / Number(this.num2)
                }
            },

        },
    })
    </script>
</body>
</html>