四.双向数据绑定
本文最后更新于 1512 天前,其中的信息可能已经有所发展或是发生改变。

v-model双向数据绑定

  • 只适用于表单元素(input,select,checkbox,textarea)
<input type="text" v-model="msg" style="width: 80%;">

image


<!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>
作者:Yuyy
博客:https://yuyy.info
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇