美文网首页
Vue 实例属性 计算属性 过滤器——保留两位小数 过滤器——

Vue 实例属性 计算属性 过滤器——保留两位小数 过滤器——

作者: 雨笑_e29c | 来源:发表于2018-09-18 19:29 被阅读0次

    一、vue实例属性gfhg

    1.el获取vue绑定的元素的,可以对元素的style进行操作

    2.data 获取vue实例中的数据

    3.options获取vue实例中的自定义属性

    4.refs    获取所有带ref属性的元素

    二、计算属性

    对于比较复杂的逻辑运算,都应该使用计算属性

    例:

    <div class="itany">

        <p>{{mag}}</p>

        <h1>{{list}}</h1>

      </div>

    <script src="vue.js"></script>

    <script>

    new Vue({

            el:".itany",

            data:{

                mag:'hello Vue'

            },

                computed:{

                list:function(){

                    return this.mag.split(' ').reverse().join('===');

                }

            }

        })

    </script>


    三、过滤器——保留两位小数

    <div class="itany">

        <p>{{1381.322165|addZero}}</p>

    </div>

    <script src="vue.js"></script>

    <script>

    //        全局

            Vue.filter('addZero',function(data){

                return data.toFixed(2);

            })

        new Vue({

            el:'.itany'

    //            局部

    //            filters:{

    //                addZero:function(data){

    //                    return data.toFixed(2);

    //                }

    //            }

        })


    四、过滤器——获取时间

    <div class="itany">

        <p>{{new Date()|houers}}</p>

    </div>

    <script src="vue.js"></script>

    <script>

        new Vue({

            el:'.itany',

              el:'.itany',

            filters:{

                houers:function(data){ 

                return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'号,星期'+data.getDay()+";"+data.getHours()+'点'+data.getMinutes()+'分'+data.getSeconds()+'秒';

        }

            }

        })

    </script>


    计算属性

    对于比较复杂的逻辑运算,都应该使用计算属性,以便于后期维护

    例:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>计算属性1</title>

    </head>

      <body>

    <div class="itany">

    <!--      标签中-->

       <h1>{{mes.split(' ').reverse().join('+++')}}</h1>

       <!--       计算属性-->

      <a href="#">{{app}}</a>

    </div>

    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

    <script>

    new Vue({

            el:".itany",

            data:{

                mes:'Vue hello'

                   },

            computed:{

               app:function(){

                 return this.mes.split(' ').reverse().join('+++');

        }

         }

      })

      </script>

    </body>



    数组

    string数组的定义有三种:

    Stringarr[] =newString[10];//创建一个长度为10的String 类型数组。

    Stringarr[] = {"张三","李四"};

    String[] arr =newString[10];


    join() 方法用于把数组中的所有元素放入一个字符串。

    元素是通过指定的分隔符进行分隔的。

    语法

    arrayObject.join(separator)


    concat() 方法用于连接两个或多个数组。

    该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。

    语法

    arrayObject.concat(arrayX,arrayX,......,arrayX)


    slice() 方法可从已有的数组中返回选定的元素。

    语法

    arrayObject.slice(start,end)


    Array.splice()方法是在数组中插入或删除元素的通用方法。

    不同于slice()和concat(),splice()会修改调用的元素数组


    push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

    语法

    arrayObject.push(newelement1,newelement2,....,newelementX)


    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

    语法

    arrayObject.unshift(newelement1,newelement2,....,newelementX)


     reverse() 方法用于颠倒数组中元素的顺序。

    语法

    arrayObject.reverse()


    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。

    语法

    arrayObject.unshift(newelement1,newelement2,....,newelementX)


    pop() 方法用于删除并返回数组的最后一个元素。

    语法

    arrayObject.pop()


    相关文章

      网友评论

          本文标题:Vue 实例属性 计算属性 过滤器——保留两位小数 过滤器——

          本文链接:https://www.haomeiwen.com/subject/hszenftx.html