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>