vue 使用瞬间

Posted 2021-01-17 shenjilin

vue 使用瞬间

　　一, 图片类

　　　　<img :src="data.deptLogo | imgUrl" onerror="this.src=‘../img/headDefaltImg.png‘"/>

　　　　注释:   

　　　　　　1)  :src中的单竖线是引用 fifter(过滤器)  

　　　　　　2)  onerror 代表src路径无效时, 我们需要定义一个默认值

　　　　　　3)  :onerror  也可以使用变量(切记加冒号)    变量格式为:   logo: ‘ this.src= " ‘ + require( ‘ ../assets/img.png ‘ ) + ‘ " ‘

　　二, fifter过滤器

<div id="test" v-cloak>
            <p>{{message | sum}}</p>
            <p>{{message | cal(10,20)}}</p>  <!--过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算。-->
            <p>{{message | sum | currency }}</p> <!--添加两个过滤器,注意不要冲突-->
        </div>

<script type="text/javascript">

//        -----------------------------------------华丽分割线(从model->view)---------------------------------------
            Vue.filter("sum", function(value) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
                return value + 4;
            });
            
            Vue.filter(‘currency‘, function(value) {
                return value * 2;
            })

            Vue.filter(‘cal‘, function (value, begin, xing) {   //全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
                console.log(begin)
                return value + begin + xing;
            });
        </script>

 

　　　　备注: filterg过滤器不可使用与input, 如遇input中使用, 请调用 compound 计算属性