数组过滤器--filter
filter()是一个数组方法，它会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，且它不会对空数组进行检测，也不会改变原始数组。
在vue中的使用
methods: {
//筛选方法调用
mySearch() {
//这里调用方法时不能用括号调用
this.arrShwo = this.arrList.filter(this.searchCondition);
},
// 筛选条件(将筛选逻辑写在这里)
searchCondition(arr) {
//arr是接收的参数，也就是调用函数的数组即 this.arrList
return arr.keyWord == this.word;
},
},
vue组件中引入模拟数据
在开发过程中我们需要模拟后台请数据，这样会产生跨域请求问题，这里我们暂时不讲跨域。有时候我们会将模拟数据写在data中，这样就不会产生问题，相当于在js中定义了一个变量。那么问题来了，当我们的模拟数据很长的时候，写在组建里是不易阅读的，但有不想产生跨域问题，那么我们可以采取引用.js文件的方式来解决。
也就是说，在一个.js文件中定义一个变量，可以是数组，也可以是对象。再将它引入到组件内使用。
.js文件写法
export const test_data = [{
name:'小明'，
age:'18'
}]
组件内写法
//引入data.js文件
import {test_data} from '@/assets/js/data.js'
// 定义长量来代替.js文件内的数据使用
const dataList = {
test_data
}
数据使用
console.log(dataList.test_data);
vux的简单使用
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
activeIndex:'/'
},
mutations: {
},
actions: {
}
})
组件内
this.$store.state.activeIndex = "/home"
v-bind 绑定属性
v-bind用于绑定html标签属性，可简写为:属性名，这里我们重点书一下class和style
:class
1.当使用v-bind绑定class时，如果标签原本就是class时，它并不会改变原本的class，而是会添加进去。
2.绑定或添加多个类名，可使用数组的方式，
<div
:class="[class1,classIf ? 'class2' : 'class3' ]"
>
</div>
可在data中定义classN的值,classIf是布尔类型，三元表达式，也可以使用 &&等逻辑表达式。
3.以对象形式绑定，当对象的value值为真时，则将对象的key值绑定在class上。对象可以写在数组里
<div
:class="[{class1:ture},{class2:false}]"
>
</div>
如果用v-bind绑定多个class ,只会识别第一个。
:style
v-bind绑定style的方式和:class类似。
<div
:style="[{width:'100px'},{height:divHeight},divStyle]"
>
</div>
锚点跳转
methods:{
returnTop(){
document.querySelector("#id").scrollIntoView(true); //id自己填
}
}
scrollIntoView()参数如果是true或为空，那么跳转到的div会在顶部显示。如果是false，则跳转的div会出现的视线内，不一定在顶部。这样写可达到效果，但无过度效果。
锚点跳转过度效果——scrollIntoView()参数详解：
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "center" | "end" | "nearest",
inline: "start" | "center" | "end" | "nearest",
}
behavior ：滚动方式，auto （默认）表示使用当前元素的 scroll-behavior 样式；instant表示 直接滚到底；smooth表示使用平滑滚动。
block： 块级元素排列方向要滚动到的位置（垂直方向），start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
inline：行内元素排列方向要滚动到的位置（水平方向），值同上。
简单的过渡滚动
methods:{
returnTop(){
document.querySelector("#id").scrollIntoView({behavior:'smooth'}); //id自己填
}
}
网友评论