需求：收集以下表单的数据
<!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>
</form>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
// 将数据单独收集到一个对象中
user: {
username: "",
password: "",
age: "",
gender: "1", //默认选中，让数据有默认值
interest: ["travel"],
grade: "ss",
introduce: "",
accept: "",
},
msg: "表单数据的收集",
},
methods: {
send() {
// alert("ajax...!!!!");
// 将数据收集好，发送给服务器。
//JSON.parse()将字符串转为对象
console.log(JSON.stringify(this.user));
},
},
});
</script>
</body>
</html>
过滤器filters适用于简单的逻辑处理，例如：对一些数据进行格式化显示。他的功能完全可以使用methods，computed来实现。过滤器可以进行全局配置，也可以进行局部配置：
① 全局配置：在构建任何Vue实例之前使用Vue.filter(‘过滤器名称’, callback)进行配置。
② 局部配置：在构建Vue实例的配置项中使用filters进行局部配置。过滤器可以用在两个地方：插值语法和v-bind指令中。
多个过滤器可以串联：{{msg | filterA | filterB | filterC}}
过滤器也可以接收额外的参数，但过滤器的第一个参数永远接收的都是前一个过滤器的返回值
需求：
从服务器端返回了一个商品的价格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)}}</h2>
<!-- 过滤器放入到v-bind中 ，不能放到v-model中-->
<input type="text" :value="price | filterA | filterB(3)" />
</div>
<hr />
<!-- 全局过滤器 -->
<div id="app2">
<h2>商品价格：{{price | filterA | filterB(3)}}</h2>
</div>
<script>
// 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);
});
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 this.price;
},
},
// 2、计算属性实现
computed: {
formatPrice() {
if (this.price === "" || this.price === undefined || this.price === null) {
return "-";
}
return this.price;
},
},
// 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>标签：Vue,return,val,price,表单,过滤器,filterA,2.13,2.12 From： https://blog.csdn.net/qq_60060362/article/details/144464075