vue(7)监听事件

爱被打了一巴掌 2022-01-11 03:05 228阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue</title>
    	<style type="text/css">
    		table tr td{ 
    			border:1px solid gray;
    			padding:10px;
    		}
    		table{ 
    			border-collapse:collapse;
    			width:800px;
    			table-layout:fixed;
    		}
    		tr.firstLine{ 
    			background-color: lightgray;
    		}
    	</style>
    </head>
    <body>
    	<script src="vue.min.js"></script>
    
    	<div id="div1">
    		<table align="center">
    			<tr class="firstLine">
    			<td>人民币</td>
    			<td>美元</td>
    			</tr>
    			<tr>
    				<td align="center" colspan="2">
    					汇率：<input type="number" v-model.number="exchange">
    				</td>
    			</tr>
    			<tr>
    				<td align="center">
    					￥:<input type="number" v-model.number = "rmb">
    				</td>
    				<td align="center">
    					$:<input type="number" v-model.number="dollar">
    				</td>
    			</tr>
    		</table>
    	</div>
    
    	<script type="text/javascript">
    		new Vue({ 
    			el:"#div1",
    			data:{ 
    				exchange:6.4,
    				rmb:0,
    				dollar:0
    			},
    			watch:{ 
    				rmb:function(val){ 
    					this.rmb = val;
    					this.dollar = this.rmb/this.exchange;
    				},
    				dollar:function(val){ 
    					this.dollar = val;
    					this.rmb = this.dollar*this.exchange;
    				},
    			}
    		});
    	</script>
    </body>
    </html>

![在这里插入图片描述][20190619142442146.png]

[20190619142442146.png]: /images/20220111/98f4800253e647b0aa76a1fc357ceef5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，228人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue-06 监听事件-自学视频

01 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 <div id="app"> <button v-o

左手的ㄟ右手/ 2022年12月18日 15:52/ 0 赞/ 85 阅读

相关 vue的滚动监听事件

scrollGet(e) { // 滚动条高度 e.srcElement.scrollTop, e.target.scrollTop

ゝ一纸荒年。/ 2022年12月18日 10:51/ 0 赞/ 174 阅读

相关 Vue添加销毁监听滚动事件

`添加 window.addEventListener("scroll",this.adsorb) ` `销毁 window.removeEventListen

妖狐艹你老母/ 2022年11月29日 12:53/ 0 赞/ 261 阅读

相关 Vue-监听事件、移除事件（节流处理）

> 业务：header（fixed定位）在顶部时是transparent的，当scroll触发，添加背景色；再次移动到顶端还是transparent的。 > > deposi

柔光的暖阳◎/ 2022年11月29日 11:42/ 0 赞/ 245 阅读

相关 Vue - 监听 Input 框回车事件

前言有时候，做搜索框时需要监听回车键，`Vue` 提供了事件及修饰符。 ![在这里插入图片描述][20210604115008306.png] 解决方案使

超、凢脫俗/ 2022年10月18日 00:55/ 0 赞/ 291 阅读

相关 vue之监听DOM事件

在vue中也有监听DOM事件，比如这样一个场景，我们输完一个名字之后点击一个按钮获取一个花名，或者牛X的名字代码如下： > ![20180423063817390][]

分手后的思念是犯贱/ 2022年05月26日 01:47/ 0 赞/ 156 阅读

相关 vue监听document的scroll事件

当前遇到了一个这样的业务场景：当页面滚动距离大于指定距离，显示回到顶部的按钮，否则隐藏按钮；项目构成：vue-cli + axios 要求：不使用jQuery,

偏执的太偏执、/ 2022年05月11日 18:16/ 0 赞/ 537 阅读

相关 vue(7)监听事件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

爱被打了一巴掌/ 2022年01月11日 03:05/ 0 赞/ 229 阅读

相关 vue 监听滚轮滚动事件

<script> export default { name:"vue-scroll", data () {

亦凉/ 2021年12月10日 06:39/ 0 赞/ 628 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 441 阅读