四.双向数据绑定

2022-06-28 19:56:25 浏览数 (2)

本文最后更新于 872 天前，其中的信息可能已经有所发展或是发生改变。

v-model双向数据绑定

  • 只适用于表单元素（input,select,checkbox,textarea）
代码语言：javascript复制
<input type="text" v-model="msg" style="width: 80%;">
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-text="msg"></h2>
        <input type="text" v-model="msg" style="width: 80%;"><br>
        <input type="text" v-model="pram1">
        <select v-model="opra">
            <option value=" "> </option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="pram2">
        <input type="button" @click="com" value="=">
        <span>{{ans}}</span>

    </div>

    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                pram1:0,
                pram2:0,
                opra:" ",
                ans:0,
                msg:"hello vue!",
            },
            methods:{
                com(){
                    // switch (this.opra){
                    //     case " ":this.ans=parseInt(this.pram1) parseInt(this.pram2);
                    //         break;
                    //     case "-":this.ans=parseInt(this.pram1)-parseInt(this.pram2);
                    //         break;
                    //     case "*":this.ans=parseInt(this.pram1)*parseInt(this.pram2);
                    //         break;
                    //     case "/":this.ans=parseInt(this.pram1)/parseInt(this.pram2);
                    //         break;    
                    // }
                    this.ans=eval(`parseInt(this.pram1)` this.opra `parseInt(this.pram2)`)
                }
            }
        })
    </script>
</body>
</html>

Post Views: 298

checkbox input post select textarea

0 人点赞