四.双向数据绑定

Yuyy

发布于 2022-06-28 19:56:25

6240

发布于 2022-06-28 19:56:25

文章被收录于专栏：yuyy.info技术专栏yuyy.info技术专栏

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

`v-model`双向数据绑定

只适用于表单元素（input,select,checkbox,textarea）

<input type="text" v-model="msg" style="width: 80%;">

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2020-2-06 2，如有侵权请联系 cloudcommunity@tencent.com 删除

checkbox