VUE L 表单数据&过滤器 ⑨

这篇具有很好参考价值的文章主要介绍了VUE L 表单数据&过滤器 ⑨。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


文章有误请指正,如果觉得对你有用,请点三连一波,蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

提示:以下是本篇文章正文内容

V u e j s Vuejs Vuejs


简介 : Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

  • 官方
  1. 中文 : https://cn.vuejs.org/
  2. 英文 : https://vuejs.org/
  3. Vue2API : https://v2.cn.vuejs.org/
  4. Vue2 相关包 : https://github.com/vuejs/awesome-vue
  5. Vue2 入门安装官方 :https://v2.cn.vuejs.org/v2/guide/installation.html
  6. Vue 相关插件 : https://awesomejs.dev/for/vue/

收集表单数据

— 代码演示 🎊

<!-- 
收集表单数据:
		若:<input type="text"/>,则v-model收集的是value值,用户输入的就是value值。
		若:<input type="radio"/>,则v-model收集的是value值,且要给标签配置value值。
		若:<input type="checkbox"/>
				1.没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)
				2.配置input的value属性:
						(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
						(2)v-model的初始值是数组,那么收集的的就是value组成的数组
		备注:v-model的三个修饰符:
						lazy:失去焦点再收集数据 v-model.lazy
						number:输入字符串转为有效的数字 v-model.number
						trim:输入首尾空格过滤
						v-model.xxx="xxx"
-->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>收集表单数据</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<form @submit.prevent="submit">
			账号:<input type="text" v-model="userInfo.username">
			<br /><br />
			密码:<input type="password" v-model="userInfo.password">
			<br /><br />
			性别:男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
			女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
			<br /><br />
			爱好:抽烟 <input type="checkbox" v-model="userInfo.hobby" value="smoke">
			喝酒 <input type="checkbox" v-model="userInfo.hobby" value="drink">
			开车 <input type="checkbox" v-model="userInfo.hobby" value="drive">
			<br /><br />
			所属校区:<select v-model="userInfo.city">
				<option value="">请选择校区</option>
				<option value="beijing">北京</option>
				<option value="shanghai">上海</option>
				<option value="shenzhen">深圳</option>
				<option value="wuhan">武汉</option>
			</select>
			<br /><br />
			其他信息:<textarea v-model="userInfo.other" cols="30" rows="10"></textarea>
			<br /><br />
			<input v-model="userInfo.agree" type="checkbox">阅读并接受<a href="http://www.baidu.com">《用户协议》</a>
			<br /><br />
			<button>提交</button>
		</form>
	</div>

	<script type="text/javascript">
		new Vue({
			el: '#root',
			data: {
				userInfo: {
					username: '',
					password: '',
					sex: '',
					hobby: [],
					city: '',
					other: '',
					agree: false,
				}
			},
			methods: {
				submit() {
					console.log(this.userInfo)
				}
			}
		})
	</script>
</body>

</html>

效果

VUE L 表单数据&过滤器 ⑨

过滤器 使用

  • 理解过滤器
  1. 功能: 对要显示的数据进行特定格式化后再显示
  2. 注意: 并没有改变原本的数据, 是产生新的对应的数据

— 代码演示 🎊

<!-- 
	过滤器:
		定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)。
		语法:
				1.注册过滤器:Vue.filter(name,callback) 或 new Vue{filters:{}}
				2.使用过滤器:{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"
		备注:
				1.过滤器也可以接收额外参数、多个过滤器也可以串联
				2.并没有改变原本的数据, 是产生新的对应的数据
-->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>过滤器</title>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<h2>显示格式化后的时间</h2>
		<!-- 计算属性实现 -->
		<h3>现在是:{{fmtTime}}</h3>
		<!-- methods实现 -->
		<h3>现在是:{{getFmtTime()}}</h3>
		<!-- 过滤器实现 -->
		<h3>现在是:{{time | timeFormater}}</h3>
		<!-- 过滤器实现(传参) -->
		<h3>现在是:{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
		<h3 :x="msg | mySlice">张学友</h3>
	</div>

	<div id="root2">
		<h2>{{msg | mySlice}}</h2>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false
	//全局过滤器
	Vue.filter('mySlice', function (value) {
		return value.slice(0, 4)
	})

	new Vue({
		el: '#root',
		data: {
			time: 1621561377603, //时间戳
			msg: '你好,张学友'
		},
		computed: {
			fmtTime() {
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},
		methods: {
			getFmtTime() {
				return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
			}
		},
		//局部过滤器
		filters: {
			timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') {
				// console.log('@',value)
				return dayjs(value).format(str)
			}
		}
	})

	new Vue({
		el: '#root2',
		data: {
			msg: 'hello,bineve!'
		}
	})
</script>

</html>

C o o k i e Cookie Cookie 影响

VUE L 表单数据&过滤器 ⑨
VUE L 表单数据&过滤器 ⑨

总结

以上是个人学习Vue的相关知识点,一点一滴的记录了下来,有问题请评论区指正,共同进步,这才是我写文章的原因之,如果这篇文章对您有帮助请三连支持一波文章来源地址https://www.toymoban.com/news/detail-499957.html

到了这里,关于VUE L 表单数据&过滤器 ⑨的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue过滤器基本使用

    在Vue 2中,你可以使用 filters 选项来定义过滤器。以下在组件中定义和使用过滤器的简单例子: 1、app.vue 使用methods实现: 2、使用filters配合computed计算属性实现: 3、引入其他组件FilterFix.vue实现: app.vue FilterFix.vue main.js

    2024年02月09日
    浏览(52)
  • Vue中过滤器如何使用?

    过滤器是对即将显示的数据做进⼀步的筛选处理,然后进⾏显示,值得注意的是过滤器并没有改变原来 的数据,只是在原数据的基础上产⽣新的数据。过滤器分全局过滤器和本地过滤器(局部过滤器)。 目录 全局过滤器 本地过滤器 过滤器传参 串联过滤器 下⾯定义⼀个全局

    2024年02月10日
    浏览(49)
  • Vue3 之 过滤器

    过滤器本质上是一个函数,与自定义指令类似。         全局过滤器      局部过滤器 案例:将字符串首字母转换为大写字母的全局过滤器  如果换成局部过滤器   注意: 当全局过滤器和局部过滤器重名,会采用局部过滤器 与自定义命令一样,全局过滤器可以在任何

    2024年02月05日
    浏览(37)
  • 如何使用Vue模板的过滤器?

    你想要学习如何使用Vue模板的过滤器吗? 首先,让我们来看看Vue模板是什么。Vue模板就是一个用来描述组件的结构和内容的HTML代码。在Vue模板中,我们可以使用过滤器来对数据进行处理和格式化。过滤器可以让你的数据变得更加美观、易读,也可以实现一些复杂的数据处理

    2024年02月08日
    浏览(36)
  • Vue过滤器(时间戳转时间)

    目录 过滤器  HTML写法: 定义过滤器:  定义全局过滤器: 过滤器串联:  带参数过滤器: 时间戳转时间 官方地址:过滤器 — Vue.js (vuejs.org) 过滤器是指Vue.js支持在{{}}插值的尾部添加一个管道符“(|)”对数据进行过滤, 经常用于格式化文本,比如字母的大写、货币的千位

    2024年02月13日
    浏览(35)
  • Vue 中过滤器 filter 使用教程

    1.1 过滤器使用的背景    过滤器 提供给我们的一种 数据处理方式 。过滤器功能不是必须要使用的,因为它所实现的功能也能用 计算属性 或者 函数调用 的方式来实现。   例如我们要在页面显示格式化的时间样式,如图所示:下面三种格式化的时间格式都是由 时间戳

    2024年02月07日
    浏览(40)
  • 如何在Vue中定义和调用过滤器?

    过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用,示例代码如下: 在创建 vue 实例期间,可以在 filters 节点中定义过滤器,示例代码

    2024年02月09日
    浏览(37)
  • Vue2中过滤器的用法详解

    目录 一、过滤器的概念 二、过滤器的使用位置 三、过滤器的分类 1、全局过滤器 2、本地过滤器 四、过滤器应用实例 1、使用过滤器实现省略号 2、使用过滤器处理时间戳 五、Vue3中已废弃过滤器  过滤器 是vue中的一个特性,作用是用于对文本进行格式化的作用。分为全局过

    2024年02月07日
    浏览(40)
  • Vue.js 中的过滤器和计算属性

    Vue.js 是一款流行的 JavaScript 框架,它提供了一种简单而灵活的方式来构建交互式 Web 应用程序。在 Vue.js 中,过滤器和计算属性是两个常用的概念。它们可以帮助开发者更方便地处理数据,提高代码的可读性和可维护性。但是这两个概念有什么区别呢?本文将会详细介绍 Vue

    2024年02月08日
    浏览(48)
  • python使用布隆过滤器筛选数据

    它是一种独特的数据结构,用以判断:一个数据 可能存在 或 一定不存在 算法思路: 开一个指定长度的数组,将所有的元素值设为0 添加元素时,执行hash,得到多个位置下标,将数组对应位置设置为1 检查元素是否存在时,执行hash,得到多个位置下标,查看数组中对应下标

    2023年04月08日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包