文章目录
- 1. 使用Vue 写一个表单数据
- 2. Vue 过滤器
- 3. v-text 指令
- 4. v-html 指令 (谨慎使用！！！)
- 5. v-clock 指令
- 6. v-once 指令
- 7. v-pre 指令
- 8. Vue的 自定义指令
- 9. Vue的 生命周期
1. 使用Vue 写一个表单数据
在这提一句，在定义的checkbox中有一个属性为：checked，勾选了为true，没有勾选为false。
需要记住的几点：
1.@submit表单form一旦提交就会触发demo中的内容 ,提交后页面内容会自动跳转消失,这里我们可以用prevent来解决
2.label的for可以与input的id进行关联，点击账号就可以切换到input光标上面。
3.trim可以去除多余的空格，但是字符串中间的空格是无法去除的。
4.这里我们可以直接将input的type定义为number，达到输入数字的效果。在Vue提供给的v-model.number，在data中直接写成数字形式。
5.input设置为radio和name来设置单选和关联内容,注意v-model绑定的是value值，这里设置的是radio没有输入框，因此定义value值来传给data
6.这里如果我们不定义value属性,这里默认是得到的checked值,此外data中的hobby值必须是数组,不能定义字符串!!
7.我们在这定义v-model.lazy可以一口气输入完成内容，失去光标后，直接提交给data，而不是时时刻刻提交
8.这里的checkbox与上面不同,直接接受checked的值true或者false就可以了
上面内容配合下面源码定义：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<!-- @submit表单form一旦提交就会触发demo中的内容 ,提交后页面内容会自动跳转消失,这里我们可以用prevent来解决-->
<form @submit.prevent="demo">
<!-- label的for可以与input的id进行关联，点击账号就可以切换到input光标上面。 -->
<!-- trim可以去除多余的空格，但是字符串中间的空格是无法去除的。 -->
<label for="demo">账号：</label><input type="text" id="demo" v-model.trim="userInfo.account"><br>
<label for="demo2">密码：</label><input type="password" id="demo2" v-model="userInfo.password"><br>
<!-- 这里我们可以直接将input的type定义为number，达到输入数字的效果。 -->
<!-- 在Vue提供给的v-model.number，在data中直接写成数字形式。 -->
年龄：<input type="number" v-model.number="userInfo.age">
<br>
性别：
<!-- input设置为radio和name来设置单选和关联内容 -->
<!-- 注意v-model绑定的是value值，这里设置的是radio没有输入框，因此定义value值来传给data -->
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
<br>
爱好：
<!-- 这里如果我们不定义value属性,这里默认是得到的checked值,此外data中的hobby值必须是数组,不能定义字符串!!-->
学习<input type="checkbox" v-model="userInfo.hobby" value="学习">
打篮球<input type="checkbox" v-model="userInfo.hobby" value="打篮球">
打台球<input type="checkbox" v-model="userInfo.hobby" value="打台球">
<br>
所属校区
<select v-model="userInfo.city">
<option value="">请选择小区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shengzheng">深圳</option>
<option value="guangdong">广东</option>
</select>
<br>
其他信息：
<!-- 我们在这定义v-model.lazy可以一口气输入完成内容，失去光标后，直接提交给data，而不是时时刻刻提交 -->
<textarea v-model.lazy="userInfo.others"></textarea>
<br>
<!-- 这里的checkbox与上面不同,直接接受checked的值true或者false就可以了 -->
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="#">《用户协议》</a>
<button>提交</button>
</form>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
userInfo:{
最低0.47元/天 解锁文章
2904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
