目录
1、表单指令:v-model="变量" 变量与value有关
普通:变量就代表value值
<input type="text" name='user' id="user" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1">
{{ v1 }}
单选框:变量为多个单选框中的某一个value值
男:<input type="radio" name="sex" value="male" v-mpdel="v2">
女:<input type="radio" name="sex" value="famale" v-mpdel="v2">
单一复选框:变量为布尔,代表是否选中
同意:<input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
多复选框:变量为数组,存放选中的选项value
爱好:<br>
篮球:<input type="checkbox" name="hobbies" value="male" v-model="v4">
足球:<input type="checkbox" name="hobbies" value="famale" v-model="v4">
书:<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }}
2、条件指令:
v-show: display:none 有此属性的标签会被渲染,但页面上不显示,但在页面上检查源码可看到
v-if: 不渲染,检查源码看不到
v-if | v-else-if | v-else:只渲染条件成立的标签,不成立的条件其标签看不到,
3、循环指令:循环有序数据类型
v-for="(v, i) in str|arr" 循环字符串或者数组,拿到字符和索引
v-for="(v, k, i) in dic" 循环字典,拿到键、值,和键的索引
4、sessionStorage | localStorage,两个都是前台数据库,localStorage是永久存贮,sessionStorage是临时存储,所属页面标签被关闭后,就会被清空
先将数据进行json序列化
localStorage.arr = JSON.stringify([1, 2, 3]); // 同步数据库
data = JSON.parse(localStorage.arr); // 解压数据
localStorage.clear(); // 清空数据库
5、分隔符:delimiters: ['{{', '}}'], 当插值表达式的符号和其他工具语言的符号冲突时,就用它修改插值表达式符号
6、过滤器:
{{ num | f1 }} // 简单过滤
{{ n1, n2 | f1(30) | f2 }} //多重过滤
1、在filters成员中定义过滤器方法
2、可以对多个值进行过滤,过滤时还可以额外传入辅助参数
3、过滤的结果可以再进行下一次过滤(多重过滤)
7、计算属性:
可以用于字符串拼接,也可以用于数字运算
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
}
8、监听属性:应用于“多个变量值依赖于一个变量值”的场景。
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
}
1、监听的属性需要在data中声明,监听方法不需要返回值
2、监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法
3、监听方法有两个回调参数:当前值,上一次
9、冒泡排序:补充
for (let i=0; i<arr.length-1; i++) { // 趟数
for (let j=0; j<arr.length-1-i; j++) { // 比较次数
// 处理条件即可
if (arr[j]参数 > stus[j + 1]参数) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}