0、首先看下页面效果
页面包括三个功能:
1、按钮触发改变文本框内容;
2、计算输入框之和;
3、计算输入框内容的位数;
贴代码:
1、创建一个HTML页面导入vue相关的依赖
<script src="static/vue.js"></script>
<script src="static/moment.js"></script>
相关依赖下载:vue相关依赖
2、将style标签放入到head标签中
<style>
input {
text-align: center;
}
input[type="text"] {
width: 160px;
}
span {
cursor: pointer;
}
span {
cursor: pointer;
}
</style>
3、将div标签放入到body中
<div id="container">
<!-- 方向:将定义好的数据绑定到视图中
实现方式:花括号,常见的Vue的指令:v-for,v-if,v-show-->
<button @click="modifyMsg">修改msg</button>
<p>{{msg}}</p>
<!-- 多数指的是表单控件 input/textarea/select...
实现方式:v-model -->
<input type="text" v-model="uesrAddrss">
<p>{{"用户输入的结果为:"+uesrAddrss}}</p>
<!-- 练习:有两个输入框,一个按钮
点击按钮时将输入框输入的数据进行求和,将结果输出到控制台 -->
<input type="text" v-model.number="num1">
<input type="text" v-model.number="num2">
<button @click="addSum">计算</button>
<p>{{"用户输入的结果为:"+num3}}</p>
<!--计算输入数字的位数-->
<input type="text" v-model.trim="myNotes">
<p>{{myNotes.length}}</p>
</div>
4、将script标签放到body后
<script>
new Vue({
el: "#container",
//设置默认值
data: {
msg: '麻子',
uesrAddrss: '西安飞天路',
num1: 0,
num2: 0,
num3: 0,
myNotes: '123',
dateStart: moment(new Date()),
dateEnd: moment(new Date())
},
//页面加载调用方法
mounted: function () {
this.addSum();//需要触发的函数
},
//定义方法
methods: {
modifyMsg: function () {
this.msg = "mazi";
this.uesrAddrss = "用户地址";
},
addSum: function () {
console.log(this.num1);
console.log(this.num2);
this.num3 = this.num1 + this.num2
}
}
})
</script>