谷粒商城33 - 前端基础 VUE-计算属性&监听器&过滤器

墨蓝 2023-03-04 06:59 12阅读 0赞

### 文章目录 ###

*   *   *  计算属性
         *  侦听器
         *  过滤器
         *   *  局部过滤器
             *  全局过滤器

### 计算属性 ###

需求: 通过动态的输入商品数量, 实时的生成价格  
代码如下, 主要是使用了vue的`computed`计算属性, 来动态的计算价格

效果如图所示 . 改变输入框的数量, 可以动态的获取总价  
![20200802103442590.png][]

### 侦听器 ###

侦听器 watch可以让我们监控一个值的变化。从而做出相应的反应。  
例如库存只有三件, 如果超了, 给出提示

代码如下 , 主要是使用了**watch**, 来进行监听 库存的容量

<body>
        <div id="app">
            
            <ul>
                <li>西游记； 价格：{
       {xyjPrice}}，数量：<input type="number" v-model="xyjNum"> </li>
                <li>水浒传； 价格：{
       {shzPrice}}，数量：<input type="number" v-model="shzNum"> </li>
                <li>总价：{
       {totalPrice}}</li>
                {
       {msg}}
            </ul>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
        <script> //watch可以让我们监控一个值的变化。从而做出相应的反应。 new Vue({ el: "#app", data: { xyjPrice: 99.98, shzPrice: 98.00, xyjNum: 1, shzNum: 1, msg: "" }, computed: { totalPrice(){ return this.xyjPrice*this.xyjNum + this.shzPrice*this.shzNum } }, watch: { //newVal 为新值 oldVal 为旧值 xyjNum(newVal,oldVal){ // alert("newVal: "+newVal+"==> oldVal: "+oldVal); if(newVal>=3){ this.msg = "库存超出限制"; this.xyjNum = 3 }else{ //减数量的时候, 把提示置空 this.msg = ""; } } }, }) </script>
    
    </body>

实现效果如图所示 . 当 西游记的库存超过3的时候 , 给出了提示.  
![在这里插入图片描述][2020080211054161.png]

### 过滤器 ###

#### 局部过滤器 ####

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

实现需求. 将后端传递的性别 1 和 0 转换为 男 女 .  
用法代码如下 .  
主要是在js中 ,声明了`filters`, `genderFilter(val)`方法用于将传递进来的值,进行转换返回.  
在页面上使用`{ {user.gender | genderFilter}}` , 将传递进去的user.gender, 最终显示为genderFilter返回的值.

`user.gender == 1?"男":"女"` 为传统的三元表达式的写法

<body>
        
        <div id="app">
            <ul>
                <li v-for="user in userList">
                    {
       {user.id}} ==> {
       {user.name}} ==> {
       {user.gender == 1?"男":"女"}} ==>
                    {
       {user.gender | genderFilter}}
                </li>
            </ul>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
        <script> let vm = new Vue({ el: "#app", data: { userList: [ { id: 1, name: 'jacky', gender: 1 }, { id: 2, name: 'peter', gender: 0 } ] }, filters: { filters 定义局部过滤器，只可以在当前vue实例中使用 genderFilter(val) { if (val == 1) { return "男"; } else { return "女"; } } } }) </script>
    </body>

页面显示效果如下 . 可以看到 过滤器显示结果与用三元表达式的一致 .  
![20200802111326183.png][]

#### 全局过滤器 ####

上面的过滤器为局部过滤器, 可以定义一个全局的过滤器  
demo代码如下  
在new vue的外面, 使用了`Vue.filter("gFilter", function (val)` , 来进行全局过滤器的定义 .

在页面中使用的代码为`{ {user.gender | gFilter}}` gFilter为全局过滤器的名称

<body>
        
        <div id="app">
            <ul>
                <li v-for="user in userList">
                    {
       {user.id}} ==> {
       {user.name}} ==> {
       {user.gender == 1?"男":"女"}} ==>
                    {
       {user.gender | gFilter}}
                </li>
            </ul>
        </div>
        <script src="../node_modules/vue/dist/vue.js"></script>
    
        <script> Vue.filter("gFilter", function (val) { if (val == 1) { return "男~~~"; } else { return "女~~~"; } }) let vm = new Vue({ el: "#app", data: { userList: [ { id: 1, name: 'jacky', gender: 1 }, { id: 2, name: 'peter', gender: 0 } ] } }) </script>
    </body>

显示的效果如图, 可以看到与局部过滤器的效果一致  
![20200802111827978.png][]

[20200802103442590.png]: /images/20230208/9eb927da9eb443f8ba0480b8a8fcfb39.png
[2020080211054161.png]: /images/20230208/e837b6719d1f4db7ae5e938a5f28b292.png
[20200802111326183.png]: /images/20230208/6f986ac599624fe99ee7b8a84ce81941.png
[20200802111827978.png]: /images/20230208/64199ebfb21444b098030acea8240b62.png