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>资源均来自第三方，谨慎下载，前往第三方网站下载 解压密码：123456 解压密码：123456
