AIDE技术官网
AIDEZY.COM

Vue.js实现计数器和千米转换小功能代码

Vue.js实现计数器和千米转换小功能代码

Vue.js实现计数器和千米转换小功能代码

前言:

Vue.js实现计数器和千米转换小功能代码,如果对你有帮助就看看吧。

实例代码:

vue.js自行导入即可使用,两个简单的小功能希望能帮助有需要的人!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>

<!-- 计数器
author:吴默然
this:2020年9月9日
url:aidezy.com
 -->


<div id="el">


<p>{{jishu}}</p>


<button v-on:click="jishu++">点我计数</button>


</div>


<br><br>

<div id="el2">

<span>千米: </span><input type="text" v-model="qianmi">


<span>米: </span><input type="text" v-model="mi">

</div>

<p id="hou"></p>

</body>

<script type="text/javascript">


var vm = new Vue({
el:'#el',

data:{

jishu:'1',

}


});

vm.$watch('jishu' , function(dang , gai){

alert("当前为:" + gai + "修改后:" + dang);

});


// 千米转换

var vm2 = new Vue({
el:'#el2',

data:{
qianmi:'0',
mi:'0',
},
computed:{

},
methods:{

},
watch:{
qianmi:function(val){

this.qianmi = val;

this.mi = this.qianmi*1000;
},

mi:function(val){

this.qianmi = val/1000;

this.mi = val;

}
}
});

vm2.$watch('qianmi' , function(newval ,oldval){

var hou = document.getElementById('hou');

hou.innerHTML = "旧:" + oldval + '新:' + newval;
});


</script>

</html>

搜一下

海报生成 赞(0) 打赏

来都来了!评论一下呗! 抢沙发

  • QQ (自动获取名称头像等信息|选填)
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (选填)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

登录

忘记密码 ?

切换登录

注册