vue组件的watch属性
2024-08-28 03:10:23
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>wacth属性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
data:function(){
return {
myInput:"",
myPhone:123456
}
},
template:`
<div>
<input type="text" v-model="myInput"/>
<input type="text" v-model="myPhone"/>
<span>{{myInput}}</span>
</div>
`,
watch:{
myInput:function(){
//当数据发生变化、执行的操作
console.log("数据改变");
},
myPhone:function(){
console.log(this.myPhone);
}
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
最新文章
- 简单回顾NPOI导入导出excel文件
- Being a Good Boy in Spring Festival 尼姆博弈
- WPS Office文档未保存怎么恢复
- 示例-创建表格&使用表格对象
- Quartz任务调度快速入门(转）
- jQuery中ajax应用
- python_基本语法_01
- Python 一路走来 Django
- Unity 2D 跑酷道路动起来
- linux之SQL语句简明教程---UPDATE DELETE FROM
- CSS一些设置用法
- Visual Studio 中的单元测试 UNIT TEST
- Arbiter 系统使用说明
- Appium 在Win7环境下搭建
- <数据结构基础学习>（五）递归
- windows下gitbash中使用zip命令
- oracle数据库无法连接 The Network Adapter could not establish
- 转）Ubuntu16.04下安装DDD（Data Display Debugger）
- iOS应用图标及尺寸
- SQL--数据--基本操作