Vue.js02之常用标签v-model及计算器案例

本次我们继续讲解Vue.js的常用指令，并且我们会用所学的知识来写一个计算器的小案例帮助大家巩固新的知识。

首先我们先来一段新的代码，代码如下：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{ msg }}</h3>
        <!-- v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现双向绑定 -->
        <input type="text" :value="msg" style="width: 40%;">
        <!-- v-model可以运用在表单元素中 -->
        <!-- input(radio,text,address,email...) select checkbox textarea -->
        <input type="text" v-model="msg" style="width: 40%;">
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello,Vue.js!'
            }
        })
    </script>
</body>
</html>

不熟悉v-bind指令的,可以查看我的上一篇博客，链接为https://blog.csdn.net/chenpeixing361/article/details/88829007。大家看了上面一段简单的代码，应该会发现只有v-model指令没有讲过，那么v-model具体用法是什么呢?该指令在表单<input>、<radio>、<select>、<checkbox>等元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。而与v-bind最大的不同之处便是v-bind只能实现单向绑定，只能实现从M自动绑定到V，而v-model可以实现双向绑定。

接下来活学活用，我们用v-model指令做一个简易的计算器，首先代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <!-- 给等号绑定一个事件 -->
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                n1:0,
                n2:0,
                result:0,
                opt:'+'
            },
            methods:{
                calc(){//算数逻辑
                    switch (this.opt){
                        case '+':
                            this.result = parseInt(this.n1) + parseInt(this.n2);
                            break;
                        case '-':
                            this.result = parseInt(this.n1) - parseInt(this.n2);
                            break;
                        case '*':
                            this.result = parseInt(this.n1) * parseInt(this.n2);
                            break;
                        case '/':
                            this.result = parseInt(this.n1) / parseInt(this.n2);
                            break;
                    }
                }
            }
        });
    </script>
</body>
</html>

上述代码中，我们定义了三个文本框，分别代表两个数以及所求的结果，<select></select>里面双向绑定加减乘除四个符号,等号的按钮我们添加一个v-on点击事件，我们在methods对象中添加calc计算的函数，通过获取不同的符号，从而得出结果。在data属性中我们对n1,n2,result,opt均进行了初始化，以上代码有一段写的很烦，就是关于calc函数判断符号，这一段代码我们是否可以进行优化呢？其实，我们可以统一用一个变量代替switch中的符号判断，优化代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易计算器</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <!-- 给等号绑定一个事件 -->
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                n1:0,
                n2:0,
                result:0,
                opt:'+'
            },
            methods:{
                calc(){//算数逻辑
                    var codeStr = 'parseInt(this.n1)'+ this.opt + 'parseInt(this.n2)';
                    this.result = eval(codeStr);
                }
            }
        });
    </script>
</body>
</html>

上述代码中，我们用codeStr变量统一保存运行后的结果，然后赋值给result,即可进行优化。

运行截图如下：

Vue.js02之常用标签v-model及计算器案例

接下来我们介绍v-bind对样式class以及style进行绑定,先上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中样式-class</title>
    <script src="vue-2.6.10.js"></script>
    <style>
        .red {
            color:red;
        }
        .thin {
            font-weight: 200;
        }
        .italic {
            font-style: italic;
        }
        .active {
            letter-spacing: 0.5em;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 普通情况下的class属性 -->
        <h1 class="red thin">{{ msg }}</h1>
        <!-- 用数组形式进行表示,用三元表达式判断是否有active属性 -->
        <h1 :class="['thin','italic',flag?'active':'']">{{ msg }}</h1>
        <!-- 在数组中使用对象代替三元表达式 -->
        <h1 :class="['thin','italic',{'active':flag}]">{{ msg }}</h1>
        <!-- 用v-bind绑定对象时,对象属性是类名,属性可以带引号,也可以不带引号,属性的值是一个标识符 -->
        <h1 :class="classObj">{{ msg }}</h1>
        <!-- 通过v-bind绑定内联样式,多个样式用数据列出 -->
        <h1 :style="[styleObj1,styleObj2]">{{ msg }}</h1>
    </div>
    <script>
        var em = new Vue({
            el: '#app',
            data: {
                msg : 'Hello,autumn_leaf!',
                flag : false,
                classObj: {red: true,thin: true,italic: false,active: false},
                styleObj1: {color:'red','font-weight': 200},
                styleObj2: {'font-style':'italic'}
            }
        });
    </script>
</body>
</html>

运行结果如下图所示：

Vue.js02之常用标签v-model及计算器案例

运行结果显示了五行，我们现在一行一行的进行讲解。

（1）第一行是HTML中常规的操作，class代表设置样式，这里用到了CSS的样式；

（2）第二行用v-bind绑定class，这里用数组来表达样式，最后用一个三元表达式来判断是否添加了active的样式；

（3）第三行依然用v-bind绑定了class,我们还是用数组进行罗列，但是我们相对于第二个进行了修改，我们把三元表达式改成了列表的形式；

（4）第四行我们把数组单独放到了data里面，然后通过classObj进行访问；

（5）第五行我们用v-bind绑定style内联样式，与（4）类似，我们把styleObj1,styleObj2放到了data里面，然后通过把styleObj1,styleObj2放到了数组里面，从而进行访问。

好了，这次的讲解就到这里了，接下里我会继续更新Vue.js的基础知识的！