vue（汇率计算器）（@事件绑定指令、计算正方形面积）（事件对象）

机场德克士双人套餐事件

已于 2022-10-23 11:10:01 修改

阅读量1.3k

点赞数 3

文章标签： vue.js javascript 前端

于 2022-10-23 10:49:52 首次发布

本文链接：https://blog.csdn.net/m0_73495603/article/details/127471907

版权

<style>
        p.title{
            text-align: center;
            font-size: 18px;
            margin: 30px 0 10px 0;
        }
        p.intro{
            text-align: center;
            font-size: 14px;
        }
        ul{
            margin: 0 auto;
            width: 200px;
            list-style-type: none;
            border: 2px solid #999;
            border-radius: 10px;
            padding: 0;
            font-size: 16px;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
        }
        li{
            padding: 10px;
        }
        li:first-child{
            display: flex;
            border-bottom: 2px solid #999;
        }
        li:not(first-child):hover{
            background-color: #ddd;
        }
        span{
            cursor: default;
        }
        span:last-child{
            float: right;
        }
        input{
            text-align: right;
            border: none;
            font-size: 16px;
            width: 100px;
            margin-left: auto;
            font-weight: bold;
            font-family: 'Courier New', Courier, monospace;
            outline: none;
            border-bottom: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="title">汇率计算器</p>
        <ul>
            <li>
                <span>{{from.currency}}</span>
                <input v-model="from.amount"></input>
            </li>
           <li v-for="item in to" v-bind:data-currency="item.currency" v-on:click="changeCurrency">
           <span>{{item.currency}}</span>
           <span>{{item.amount}}</span>
           </li>
        </ul>
        <p class="intro">鼠标点击可以切换货币种类</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let rate={
            CNY:{CNY:1     ,JPY:16.876, HKD:1.1870, USD:0.1526, EUR:0.1294},
            JPY:{CNY:0.0595,JPY:1 ,HKD:0.0702, USD:0.0090, EUR:0.0077     },
            HKD:{CNY:0.8463, JPY:14.226,HKD:1, USD:0.1286, EUR: 0.10952   },
            USD:{CNY:6.5813, JPY:110.62, HKD:7.7759, USD:1, EUR:0.85164   },
            EUR:{CNY:7.7278, JPY:129.89, HKD:9.1304, USD:1.1742, EUR:1    },
        }
        let vm = new Vue({
            el:'#app',
            data:{
                from:{currency:'CNY',amount:100},
                to:[
                    {currency:'JPY',amount:0},
                    {currency:'HKD',amount:0},
                    {currency:'USD',amount:0},
                    {currency:'EUR',amount:0},
                ]
            },
            methods:{
                exchange(from, amount, to){
                    return(amount * rate[from][to]).toFixed(2)
                },
                changeCurrency(event){
                    const c = event.currentTarget.dataset.currency;
                    const f = this.from.currency;
                    this.from.currency= c;
                    this.to.find(_ => _.currency === c).currency = f;
                }
            },
            watch:{
                from:{
                    handler(value){
                        this.to.forEach(item => {
                            item.amount = this.exchange(this.from.currency,
                            this.from.amount, item.currency)
                        });
                    },
                    deep:true,
                    immediate:true
                }
            }
        })
    </script>
</body>
</html>

计算正方形面积

<div id="app">





<p>正方形的边长是{{length}},正方形的面积{{area}}</p>

<button v-on:click="changeLength">改变边长</button>

</div>

<script src="../vue.js"></script>

<script>

new Vue({

el:'#app',

data:{

length:2,

},

computed:{

area(){

return this.length*this.length

}

},

methods:{

changeLength(){

this.length++

}

}

})

</script>

事件对象

y>

<div id="app">

<button @click="click">单击</button>

<button @dblclick="dblclick">双击</button>

<input type="text" placeholder="内容" @blur="blurText" @focus="focusText" @keydown="keydownText" @keyup="keyupText" @input="inputText">

</div>

<script src="./vue.js"></script>

<script>

// load事件：在整个页面加载完成后触发

// window.onload = function(){

// alert("页面加载完成")

// }

new Vue({

el:'#app',

methods:{

click(){

alert('小卢恋爱脑');

},

dblclick(){

alert('小黄拍小邹睡觉丑照');

},

blurText(){

console.log("blur事件失焦");

},

focusText(){

console.log("focus事件获取");

},

keydownText(){

console.log("火锅");

},

keyupText(){

console.log("锅");

},

inputText(){

console.log("ok");

}

}

})

</script>