网站首页 > 基础教程 正文
Vue - 表单的输入与绑定
输入框输入文本,对应以前都是操作DOM树结构进行的绑定。现在学习了VUE不建议大家通过DOM树进行绑定获取数据。
需求一
输入框输入文本,对应页面联动显示:
<script>
export default{
name: 'app',
data(){
return{
username:""
}
}
}
</script>
<template>
<main>
<div>
<h1>表单的输入与绑定</h1>
<p>{{username}}</p>
<input type="text" v-model="username">
</div>
</main>
</template>
需求二
输入框输入文本,点击按钮,对应控制台打印输入的文本内容:
<script>
export default{
name: 'app',
data(){
return{
username:""
}
},
methods:{
clickInputHandle(){
console.log(this.username)
}
}
}
</script>
<template>
<main>
<div>
<h1>表单的输入与绑定</h1>
<p>{{username}}</p>
<input type="text" v-model="username">
<button @click="clickInputHandle">表单按钮</button>
</div>
</main>
</template>
点击后的效果如下图:
总结
不只是input标签的输入框,常见的输入框都可以。单选框、多选框select标签都可以。
修饰符
需求三 - .lazy
- 在每次 change 事件后更新数据
在失去输入框焦点时获取输入文本框的信息:
<script>
export default{
name: 'app',
data(){
return{
username:""
}
},
methods:{
clickInputHandle(){
console.log(this.username)
}
}
}
</script>
<template>
<main>
<div>
<h1>表单的输入与绑定</h1>
<p>{{username}}</p>
<input type="text" v-model.lazy="username">
<button @click="clickInputHandle">表单按钮</button>
</div>
</main>
</template>
.number
用户输入自动转换为数字
.trim
默认自动去除用户输入内容中两端的空格
Vue - 计算属性
模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。推荐使用计算属性来描述依赖响应式状态的复杂逻辑:
需求一
输入框输入文本,在页面对应文本倒序操作:
<script>
export default{
name: 'app',
data(){
},
computed:{
getMessageA(){
return this.messageA.split('').reverse().join('')
}
}
}
</script>
<template>
<main>
<div>
<h1>计算属性</h1>
<p>{{messageA.split('').reverse().join('')}}</p>
<input type="text" v-model="messageA">
<p>{{ getMessageA }}</p>
</main>
</template>
- computed:编写对应的方法,不用加括号
- methods:编写对应的方法与computed效果一致,调用时要加括号
Vue - 侦听器
使用 watch 选项在每次响应式属性发生变化时触发一个函数。
<script>
export default{
name: 'app',
data(){
return{
listenT:""
}
},
watch:{
listenT(newValue,oldValue){
console.log(newValue,oldValue);
}
}
}
</script>
<template>
<main>
<div>
<h1>侦听器</h1>
<p>{{question}}</p>
<div>
<input type="text" v-model="listenT">
</div>
</div>
</main>
</template>
- 监听每一次操作的值的变化
Class 与 Style 绑定
:class (v-bind:class 的缩写) 传递一个对象来动态切换 class:
<script>
export default{
name: 'app',
data(){
return{
isActive: true
}
}
}
</script>
<template>
<main>
<div>
<h1>类与样式绑定</h1>
<div :class="{active: isActive}">样式</div>
</div>
</main>
</template>
更多技术文章:
https://qrcode.ceba.ceshiren.com/link?from=toutiao&name=toutiao&project_id=qrcode&author=Muller
- 上一篇: Vue技术栈高频面试题 vue面试技术点
- 下一篇: 白话说前端 前端语言有什么
猜你喜欢
- 2024-11-09 vuejs开发入门之工具安装和常用指令
- 2024-11-09 如何在Vue中动态添加类名 vue动态添加的元素进行操作
- 2024-11-09 很全面的vue面试题总结 vue面试题2020例子以及答案
- 2024-11-09 vue数据获取和属性设置 vue数据获取放在哪个阶段
- 2024-11-09 「面试题」和Vue.js有关的41个基础问题
- 2024-11-09 vue中动态指令的用法和event事件 vue动态控制hover
- 2024-11-09 VUE自定义指令 自定义指令的应用场景有哪些?
- 2024-11-09 限时分享!今天花了两小时整理出来的 30道 入门到进阶的 Vue 面试题
- 2024-11-09 VUE实战技巧,让你的代码少一点 vue怎么样
- 2024-11-09 Vue项目常见问题以及解决方案 vue项目开发中遇到的问题
- 03-14从0到1体验Jenkins+Docker+Git+Registry实现CI自动化发布
- 03-14教你测试开发丨测试小白也能听懂的Docker讲解和应用
- 03-14Docker安装及mysql、redis实战(docker安装mysql5.7)
- 03-14Docker技术:大神整理——Harbor私服搭建和使用
- 03-14Springboot项目使用docker部署(springboot docker部署)
- 03-14Linux环境通过Dockerfile创建Tomcat镜像
- 03-14终于有人把Docker讲清楚了,Docker入门教程,原来这么简单...
- 03-14linux下面安装docker(linux安装docker报错)
- 最近发表
-
- 从0到1体验Jenkins+Docker+Git+Registry实现CI自动化发布
- 教你测试开发丨测试小白也能听懂的Docker讲解和应用
- Docker安装及mysql、redis实战(docker安装mysql5.7)
- Docker技术:大神整理——Harbor私服搭建和使用
- Springboot项目使用docker部署(springboot docker部署)
- Linux环境通过Dockerfile创建Tomcat镜像
- 终于有人把Docker讲清楚了,Docker入门教程,原来这么简单...
- linux下面安装docker(linux安装docker报错)
- DeepSeek:一分钟教会你部署Tomcat
- Docker 安装Mysql(流程、注意点、实例)
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)