Vue——06——v-model双向数据绑定和简易计算器

v-bind只能单向绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

<body>
    <div id="app">
        <!-- v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定
   使用v-model指令,可以实现表单元素和Model中数据的双向数据绑定 
注意:v-model只能运用在表单元素中  input text adress  email select checkbox textarea
-->
<h4>{{msg}}</h4>

        <input type="text"   style="width: 100%;"  v-bind:value="msg">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: '如何实现双向数据绑定'
            },
            method: {

            }

        })
    </script>
</body>

</html>

在这里插入图片描述

v-model实现双向绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

<body>
    <div id="app">
        <!-- v-bind只能实现数据的单向绑定,从M自动绑定到V,无法实现数据的双向绑定
   使用v-model指令,可以实现表单元素和Model中数据的双向数据绑定 
注意:v-model只能运用在表单元素中  input text adress  email select checkbox textarea
-->
<h4>{{msg}}</h4>

        <input type="text"   style="width: 100%;"  v-model="msg">
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                msg: '如何实现双向数据绑定'
            },
            method: {

            }

        })
    </script>
</body>

</html>

在这里插入图片描述

简易计算器

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>

<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>

Vue——06——v-model双向数据绑定和简易计算器

v-bind只能单向绑定

v-model实现双向绑定

简易计算器

猜你喜欢