Vue：收集表单数据过滤器
Vue：收集表单数据&过滤器
2.11、收集表单数据
需求：收集以下表单的数据，并且对表单输入进行基本的验证，同时增加一个重置表单的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>表单数据的收集</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- submit事件，prevent阻止默认行为 -->
<form @submit.prevent="send">
<!-- trim修饰符可以去除前后空白 -->
用户名：<input type="text" v-model.trim="user.username" /><br /><br />
密码：<input type="password" v-model="user.password" /><br /><br />
<!-- number来将字符串转为数字 -->
年龄：<input type="number" v-model.number="user.age" /><br /><br />
<!-- v-model 主要收集的是value值，否则手机不到信息 -->
性别： 男<input type="radio" name="gender" value="1" v-model="user.gender" />
女<input type="radio" name="gender" value="0" v-model="user.gender" /><br /><br />
爱好：
<!-- 注意：对于checkbox来说，如果没有手动指定value，
那么会拿这个标签的checked属性的值作为value -->
旅游<input type="checkbox" v-model="user.interest" value="travel" />
运动<input type="checkbox" v-model="user.interest" value="sport" />
唱歌<input type="checkbox" v-model="user.interest" value="sing"/><br /><br />
学历：
<select v-model="user.grade">
<option value="">请选择学历</option>
<option value="zk">专科</option>
<option value="bk">本科</option>
<option value="ss">硕士</option>
</select><br /><br />
简介：
<!-- lazy修饰符，失去焦点时再收集信息 -->
<textarea cols="50" rows="15" v-model.lazy="user.introduce"></textarea>
<br /><br />
<input type="checkbox" v-model="user.accept" />阅读并接受协议<br /><br />
<!-- <button @click.prevent="send">注册</button> -->
<button>注册</button>
<button @click="resetForm">重置</button>
</form>
<div v-if="errorMsg">{{errorMsg}}</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
// 将数据单独收集到一个对象中
user: {
username: "",
password: "",
age: "",
gender: "1", //默认选中，让数据有默认值
interest: ["travel"],
grade: "ss",
introduce: "",
accept: false,
},
msg: "表单数据的收集",
errorMsg: ""
},
methods: {
send() {
// 简单的表单验证
if (!this.user.username) {
this.errorMsg = "用户名不能为空";
return;
}
if (!this.user.password) {
this.errorMsg = "密码不能为空";
return;
}
if (this.user.age < 18) {
this.errorMsg = "年龄不能小于18岁";
return;
}
if (!this.user.accept) {
this.errorMsg = "请阅读并接受协议";
return;
}
this.errorMsg = "";
// alert("ajax...!!!!");
// 将数据收集好，发送给服务器。
//JSON.parse()将字符串转为对象
console.log(JSON.stringify(this.user));
},
resetForm() {
this.user = {
username: "",
password: "",
age: "",
gender: "1",
interest: ["travel"],
grade: "ss",
introduce: "",
accept: false
};
this.errorMsg = "";
}
},
});
</script>
</body>
</html>
2.12、过滤器
过滤器filters适用于简单的逻辑处理，例如：对一些数据进行格式化显示。它的功能完全可以使用methods，computed来实现。过滤器可以进行全局配置，也可以进行局部配置：
① 全局配置：在构建任何Vue实例之前使用Vue.filter(‘过滤器名称’, callback)进行配置。
（把Vue.filter(‘过滤器名称’, callback)放到Vue实例（const vm = new Vue）前面）
② 局部配置：在构建Vue实例的配置项中使用filters进行局部配置。过滤器可以用在两个地方：插值语法和v-bind指令中。
（在 Vue 中，过滤器可以放入v-bind中，但不能直接放到v-model中的原因：
v-model用于实现双向数据绑定，主要用在表单元素上，如input、textarea、select等，它会根据用户在表单中的输入来实时更新数据模型，同时也会根据数据模型的变化来更新表单的显示值。
如果将过滤器直接放在v-model中，会破坏双向数据绑定的正常逻辑，因为过滤器的作用是对数据进行一次性的转换，而不是实时响应数据的双向变化。）
多个过滤器可以串联：{{msg | filterA | filterB | filterC}}
（注：要传入一个初始值即msg，是串联显示的）
过滤器也可以接收额外的参数，但过滤器的第一个参数永远接收的都是前一个过滤器的返回值（即：filterA的第一个参数是msg，filterB的第一个参数是filterA的返回值，以此类推）
需求：
从服务器端返回了一个商品的价格price，这个price的值可能是这几种情况：‘’、null、undefined、60.5
要求：
如果是’’ 、null、undefined ，页面上统一显示为 -
如果不是，则页面上显示真实的数字，并且对价格进行千分位格式化。
在Vue3当中，已经将过滤器语法废弃了。
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- 计算属性实现 formatPrice -->
<h2>商品价格：{{formatPrice}}</h2>
<!-- 方法实现 formatPrice2() -->
<h2>商品价格：{{formatPrice2()}}</h2>
<!-- 过滤器实现 放在插值语法中 -->
<h2>商品价格：{{price | filterA | filterB(3) | filterC}}</h2>
<!-- 过滤器放入到v-bind中 ，不能放到v-model中-->
<input type="text" :value="price | filterA | filterB(3) | filterC" />
</div>
<hr />
<!-- 全局过滤器 -->
<div id="app2">
<h2>商品价格：{{price | filterA | filterB(3) | filterC}}</h2>
</div>
<script>
// 千分位格式化函数
function formatNumber(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// 4、 配置全局的过滤器。
Vue.filter("filterA", function (val) {
if (val === null || val === undefined || val === "") {
return "-";
}
return val;
});
Vue.filter("filterB", function (val, number) {
return val.toFixed(number);
});
Vue.filter("filterC", function (val) {
if (val!== "-") {
return formatNumber(val);
}
return val;
});
const vm2 = new Vue({
el: "#app2",
data: {
price: 20.3,
},
});
const vm = new Vue({
el: "#app",
data: {
msg: "过滤器",
price: 50.6,
},
//1、方法实现需求
methods: {
formatPrice2() {
if (this.price === "" || this.price === undefined || this.price === null) {
return "-";
}
return formatNumber(this.price.toFixed(3));
},
},
// 2、计算属性实现
computed: {
formatPrice() {
if (this.price === "" || this.price === undefined || this.price === null) {
return "-";
}
return formatNumber(this.price.toFixed(3));
},
},
// 3、局部过滤器
/* filters: {
filterA(val) {
if (val === null || val === undefined || val === "") {
return "-";
}
return val;
},
//需求： 确保传递过来的数据val，保留两位小数。
filterB(val, number) {
console.log(val); //此时的值时filterA的返回值
return val.toFixed(number);
},
}, */
});
</script>
</body>