vue: Filter与Mixins

最新推荐文章于 2025-03-06 10:23:45 发布

星辰大海_enoch

最新推荐文章于 2025-03-06 10:23:45 发布

阅读量891

点赞数

本文链接：https://blog.csdn.net/u012872771/article/details/103666570

版权

filter根据规则进行筛选渲染（将来大部分将被计算属性代替，使用场景少）

需求1: 把data中的msg值渲染为大写

如何使用filter：

局部filters

在export default中写上filters(局部)字段，再下面定义方法toUpperCase
filter的使用场景只有双大括号和v-bind指令，在双大括号中加 | 后面写fiters中定义的方法即可

        <template>
  <div id="app">
   <h1>filters & mixins</h1>
   <p>{{ msg | toUpperCase }}</p>
  </div>
</template>
<script>
export default {
 data(){
 return{
      msg: "hello",
    }
  },
  filters: {
 toUpperCase(value) {
 return value.toUpperCase();
 // 大写方法  fiters两个使用场景 {{ 数据绑定 }} v-bind指令
    }
  }
}
</script>

小结: fiters可以不改变原来的数据格式，可以简单的修改格式，比如大小写、时间格式、等，它修改过的东西不会保存。Filter的this是undefined

全局filter

在入口文件main.js中

定义全局filers

        import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.filter("toLowerCase", function(value) {
 return value.toLowerCase();
 // 转小写
})
new Vue({
 render: h => h(App),
}).$mount('#app')

App.vue文件

        <p>{{ msg | toUpperCase | toLowerCase }}</p>

大写转小写

Mixins

我们复制一份App.vue的代码到新建的list.vue中，再用组件的方式引入回来，可以得到两份一样的代码(删除了hello,用来区分)。

App.vue文件

        <template>
  <div id="app">
   <h1>filters & mixins</h1>
   <p>{{ msg | toUpperCase | toLowerCase }}</p>
   <hr>
   <input type="text" v-model="inputText">
   <ul>
     <li v-for='fruit in fruitArr' :key="fruit">{{ fruit }}</li>
   </ul>
   <hr>
   <list></list>
  </div>
</template>

<script>
import list from "./components/list"
export default {
  components: {
    list: list
  },
 data(){
 return{
      msg: "hello",
      inputText: "",
      fruitArr: ["Apple", "Banana", "Mango"]
    }
  },
  filters: {
 toUpperCase(value) {
 return value.toUpperCase();
 // 大写方法  fiters两个使用场景 {{ 数据绑定 }} v-bind指令
    }
  }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

list.vue文件

        <template>
  <div id="app">
   <h1>filters & mixins</h1>
   <hr>
   <input type="text" v-model="inputText">
   <ul>
     <li v-for='fruit in fruitArr' :key="fruit">{{ fruit }}</li>
   </ul>
  </div>
</template>

<script>
export default {
 data(){
 return{
      inputText: "",
      fruitArr: ["Apple", "Banana", "Mango"]
    }
  },
}
</script>

<style>
</style>

现在我们要使用组件化思想，把重复的代码提取成一个功能

新建一个listMixin.js的文件

把重复的代码粘贴到里面

listMixin.js文件代码

        export default {
 data() {
 return {
            inputText: "",
            fruitArr: ["Apple", "Banana", "Mango"]
        }
    },
}

然后在App.vue中引入组件，在export default中使用mixins字段，值为数组，把引入文件的名放在里面，然后把重复的代码删除，还是可以用的。在list.vue中也这样操作即可。

App.vue中的script代码

        import list from "./components/list"
import listMixin from "./components/listMixin"  // 引入mixin代码
export default {
  mixins: [listMixin],                          // 使用数组方式使用
  components: {
    list: list
  },
 data(){
 return{
      msg: "hello",
 // inputText: "",                             // 把重复代码去除
 // fruitArr: ["Apple", "Banana", "Mango"]     // 把重复代码去除
    }
  },
  filters: {
 toUpperCase(value) {
 return value.toUpperCase();
 // 大写方法  fiters两个使用场景 {{ 数据绑定 }} v-bind指令
    }
  }
}

全局Mixins：

        import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

Vue.mixin({
 created() {
 console.log("全局的mixin")
  }
})
// 全局的mixins
new Vue({
 render: h => h(App),
}).$mount('#app')