过滤器，就是一个函数，传入值返回处理后的值
过滤器只能用在,插值表达式和v-bind动态属性里
/*
语法：
vue.fliter("过滤器名",(值)=>{return '处理后的值'})。一般注册全局过滤器时使用
fliters:{过滤器名字:(值)=>{return'处理后的值'}}
可以同时使用多个过滤器，或者过滤器传参
过滤器传参: vue变量 | 过滤器(实参)
多个过滤器: vue变量 |过滤器1 | 过滤器2
|:管道符
*/
<template>
<div id="app">
<!-- 过滤器，只能在插值表达式和v-bind动态属性里使用 -->
<p>{{ mvp | reverse }}</p>
<!-- 字母大写 -->
<p :title="mvp | toUp">悬停</p>
<!-- 全局过滤 首字母大写-->
<p>{{ mvp | fliUp }}</p>
<!-- 多个过滤器的使用 -->
<h1>{{ mvp | fliUp | reverse }}</h1>
</div>
</template>
<script>
//需要先拿到vue对象
import vue from "vue";
// 再调用filter方法定义： 注意只定义一个，所以filter没加s
// 函数这里缩写了两个地方： 1.箭头函数 2. 直接返回值
//全局过滤一般在main.js文件里定义
vue.filter("fliUp", (msg) => msg[0].toUpperCase() + msg.slice(1));
export default {
data() {
return {
mvp: "hello,world",
};
},
filters: {
//字符串反转
reverse(mvp) {
return mvp.split("").reverse().join("");
},
toUp(mvp) {
return mvp.toUpperCase();
},
},
};
</script>
<style>
</style>
计算属性--computed
一个变量的值，以来另外一些数据计算而来的结构
/*
语法：
computed:{
'计算属性名'(){
return '值'
}
}
注意：计算数学也是vue数据变量,所以不要和data里重名，用法和data相同
*/
<template>
<div>
<div v-for="(item, index) in arr" :key="arr[index]">
<input type="checkbox" v-model="ckeAll" :value="item" />
{{ arr[index] }}
</div>
<p>你选中的元素, 累加的值和为: {{ theSum }}</p>
</div>
</template>
<script>
export default {
data() {
return {
arr: [9, 15, 19, 25, 29, 31, 48, 57, 62, 79, 87],
ckeAll: [],
};
},
computed: {
theSum() {
return this.ckeAll.reduce((sum, val) => (sum += val), 0);
},
},
};
</script>
<style>
</style>
计算属性完整写法,计算属性也是变量
/*
语法：
computed:{
'属性名':{
set(值){
}
},
get(){
return '值'
}
}
*/
全选影响小选,反选
<template>
<div>
<div>
<input type="checkbox" v-model="all" />全选
<button @click="btn">反选</button>
</div>
<ul>
<li v-for="item in arr" :key="item.id">
<input type="checkbox" v-model="item.checked" />{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
arr: [
{ id: 1, name: "猪八戒", checked: false },
{ id: 2, name: "孙悟空", checked: false },
{ id: 3, name: "白龙马", checked: false },
{ id: 4, name: "唐僧", checked: false },
],
};
},
computed: {
all: {
set(status) {
this.arr.forEach((item) => {
item.checked = status;
});
},
get() {
return this.arr.every((itme) => itme.checked);
},
},
},
methods: {
btn() {
return this.arr.forEach((item) => {
item.checked = !item.checked;
});
},
},
};
</script>
<style>
</style>
侦听器,watch
/*
语法：
watch:{
'被侦听的属性名'(newVal,oldVal){
}
}
*/
深度侦听和立即执行,侦听复杂类型，或者立即执行侦听函数
/*
语法：
watch:{
'要侦听的属性名':{
immediate:true,
deep:true,
handler(newVal,oldVal){
}
}
}
immediate:立即执行
deep：深度侦听复杂类型内变化
*/
<template>
<div>
<!-- 监听基础类型 -->
<input type="text" v-model="basics" />
<!-- 监听复杂数据类型，比如对象 -->
<input type="text" v-model="obj.name" />
</div>
</template>
<script>
export default {
data() {
return {
basics: "",
obj: {
name: "",
},
};
},
watch: {
// 基础监听,newval:新值，oldval:旧值
// basics(newval, oldval) {
// console.log(newval, oldval);
// },
// 对象监听,简写
// "obj.name"(newval, oldval) {
// console.log(newval, oldval);
// },
//对象监听的完整写法
obj: {
immediate: true, //立即执行
deep: true, //深度监听复杂数据类型
//handler:固定写法，不可修改
handler(newval, oldval) {
console.log(newval);
console.log(oldval);
},
},
},
};
</script>
<style>
</style>
移动端-导航切换效果
<template>
<div class="wrap">
<div class="nav_left" id="navLeft">
<div class="nav_content">
<span
:class="{ active: index == activeIndex }"
v-for="(item, index) in arr"
:key="item.first_id"
@click="btn(index)"
>{{ item.first_name }}</span
>
</div>
</div>
<!-- <div class="down">
<i class="iconfont icon-xiajiantoubeifen gray"></i>
</div> -->
</div>
</template>
<script>
export default {
name: "tab",
data() {
return {
arr: [
{
first_id: "0",
first_name: "热门",
},
{
first_id: "621",
first_name: "\u5496\u5561",
},
{
first_id: "627",
first_name: "\u996e\u98df",
},
{
first_id: "279",
first_name: "\u7537\u88c5",
},
{
first_id: "294",
first_name: "\u5973\u88c5",
},
{
first_id: "122",
first_name: "\u773c\u955c",
},
{
first_id: "339",
first_name: "\u5185\u8863\u914d\u9970",
},
{
first_id: "391",
first_name: "\u6bcd\u5a74",
},
{
first_id: "35",
first_name: "\u978b\u9774",
},
{
first_id: "39",
first_name: "\u8fd0\u52a8",
},
{
first_id: "153",
first_name: "\u7bb1\u5305",
},
{
first_id: "119",
first_name: "\u7f8e\u5986\u4e2a\u62a4",
},
{
first_id: "355",
first_name: "\u5bb6\u7eba",
},
{
first_id: "51",
first_name: "\u9910\u53a8",
},
{
first_id: "334",
first_name: "\u7535\u5668",
},
{
first_id: "369",
first_name: "\u5bb6\u88c5",
},
{
first_id: "10",
first_name: "\u5bb6\u5177",
},
{
first_id: "223",
first_name: "\u6570\u7801",
},
{
first_id: "429",
first_name: "\u6c7d\u914d",
},
{
first_id: "546",
first_name: "\u5065\u5eb7\u4fdd\u5065",
},
{
first_id: "433",
first_name: "\u5b9a\u5236",
},
],
activeIndex: 0, //保存用户当前点击的索引值
};
},
methods: {
btn(index) {
this.activeIndex = index;
},
},
};
</script>
<style>
.wrap {
width: 100%;
display: flex;
margin: 0.2rem 0 0 0;
position: relative;
}
/*左侧的导航样式*/
.nav_left {
width: 21.1875rem;
overflow: scroll;
}
.nav_left::-webkit-scrollbar {
display: none;
}
.nav_content {
white-space: nowrap;
padding: 0 0.7rem;
}
.nav_content span {
display: inline-block;
padding: 0.4rem 0.6rem;
font-size: 0.875rem;
}
.nav_content .active {
border-bottom: 2px solid #7f4395;
color: #7f4395;
}
.nav_left,
.down {
float: left;
}
/*右侧导航部分*/
.down {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.gray {
color: gray;
display: inline-block;
vertical-align: middle;
}
/* .Active {
border-bottom: 2px solid #7f4395;
color: #7f4395;
} */
</style>
