【后端卷前端3】

侦听器

监听的数据是 data()中的动态数据~响应式数据

<template><div><p>{{showHello}}</p><button @click="updateHello">修改数据</button></div>
</template><script>export default {name: "goodsTest",data() {return {showHello: "Hello"},methods: {updateHello() {this.showHello = "World"}}}
</script>

上面实现了一个功能:
点击按钮修改文本数据, 我们想要监听showHello的值的变化与否,我们需要在data()中去定义一个监听模块–

 
<script>export default {name: "goodsTest",data() {return {showHello: "Hello",}},methods: {updateHello() {this.showHello = "World"},},watch:{//函数名必须与data中的showHello名保持一致showHello(newValue,oldValue){console.log("新的值-",newValue)console.log("旧的值-",oldValue)}}}
</script>

表单输入绑定

<template>
<div><input v-model="inputMsg" type="text" placeholder="请输入文本"><input :model="inputMsg" type="text" placeholder="请输入文本"><p>v-model文本数据:{{inputMsg}}</p><p>:model文本数据:{{inputMsg}}</p>
</div>
</template><script>export default {name: "bindInput",data() {return {inputMsg: ""}}}
</script><style scoped></style>

前端展示的时候 , :model的方式并不能实时显示输入的文本
在这里插入图片描述

原因:
:model 其实是v-bind:model的缩写,其作用是将值传递给该组件,但是从该组件获得的值不能向上传递;

v-model修饰符

v-model也提供了修饰符: lazy trim `number’

lazy

默认情况下 v-model会在每次input事件后更新数据,此时使用lazy修饰符来使得每次在change事件后更新数据;

在这里插入图片描述

效果是输入之后按回车或者失去焦点时才会实时更新数据

在这里插入图片描述

trim

在这里插入图片描述

效果是去掉两边的空格

在这里插入图片描述

number

使用修饰符.number可以将输入的数据转换为Number类型

注意这里并不能限制输入的数据类型,而是可以帮助我们将数据转换为数字,如果这个值不能被解析,则会返回原始值;

举个例子:

<template><div><input v-model.number="inputMsg" type="text" placeholder="请输入数字"><p>数据格式:{{typeof inputMsg}}</p></div>
</template><script>export default {name: "bindInput",data() {return {inputMsg: null,}}}
</script><style scoped></style>

在这里插入图片描述

模板引入

<template><div><input v-model.number="inputMsg" type="text" placeholder="请输入数字"><p>数据格式:{{typeof inputMsg}}</p><div ref="form" class="hello">div里的信息</div><button @click="getDomElement">获取元素</button></div>
</template><script>export default {name: "bindInput",data() {return {divMsg: '获取整个dom元素',inputMsg: '',bindMsg: "绑定数据",}},methods: {getDomElement() {console.log(this.$refs.form)}}}
</script><style scoped></style>