vue笔记2 -过滤器，v-text ，v-html ，v-bind，v-on指令

栏目: Html · 发布时间: 5年前

内容简介：Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。的，通过给 Vue 实例添加选项 filters 来设置

一、过滤器

1、语法：

Vue. 支持在｛｛｝｝插值的尾部添加一小管道符 “ | ” 对数据进行过滤，

经常用于格式化文本，比如字母全部大写、货币千位使用逗号分隔等。

2、过滤的规则是自定义

的，通过给 Vue 实例添加选项 filters 来设置

过滤器：{{ data | filter1 |filter2}}

3、实例

需求是实时显示当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
 
</head>
<body>
    <div id="aaa">
        {{date}}   原始数据
        {{date | formatDate}}  过滤后的数据
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>       
<script>
    var plusDate =function(value){
        return value>10?value:'0'+value
    } 
    //判断传入的数据是否是个位数，是个位数就补0
    var app=new Vue({
        el:'#aaa',
        data:{
            date:new Date(),
        },
        mounted:function(){
            var _this=this
            this.timer=setInterval(function(){
                _this.date = new Date()
            },1000) //设置定时器，一秒输出一次
        },
        beforeDestroy:function (){
            if(this.timer){
                clearInterval(this.timer)
            } //在实例销毁，清除定时器
        },
        filters:{
            formatDate:function(value){
                var date =new Date(value)
                var year=date.getFullYear()
                var month=plusDate(date.getMonth()+1)
                var day=plusDate(date.getDate())
                var hour=plusDate(date.getHours())
                var min=plusDate(date.getMinutes())
                var sec=plusDate(date.getSeconds())
                return year +'--'+month+'--'+day +'   '+hour+':'+min+':'+sec   
            }
        } //在filters对象定义所有过滤器，过滤器formatDate是一个函数，必须的参数是value值，其他参数是 {{date | formatDate(66,69)}} ,过滤器传入的数据。注意使用过滤器，传入的参数不用写value 

    })
</script>
</body>
</html>

结果展示

4、过滤器的参数

{{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和

第三个参数

{{date | formatDate(66,99)}} 中的第一个和第二个参数，分别对应过滤器的第二个和 第三个参数

filters:{
            formatDate:function(value,a,b){ //formatDate是过滤器的名字，会有其他的过滤器
                var date =new Date(value);
                var year =date.getFullYear();
                var month=plusDate(date.getMonth()+1);
                var day=plusDate(date.getDate());
                var hours=plusDate(date.getHours());
                var min=plusDate(date.getMinutes());
                var sec=plusDate(date.getSeconds());
                return year +'--'+month+'--'+day+'  '+hours+'--'+min+'--'+sec+a+b;
            }
        },

结果会同时输出ab

vue笔记2 -过滤器，v-text ，v-html ，v-bind，v-on指令

我特别容易写错month，和Date不加大写

二、指令和事件

指令（ Directives ）是 Vue 模板中最常用的一项功能，它带有前缀 v－，能帮我们

快速完成DOM操作。循环渲染。显示和隐藏

本 节目标 v-text , v-html , v-bind , v-on

1、v-text:—————解析文本和{{ }} 作用一样

2、v-html:————— 把数据当成html解析

3、v-bind—————–v-bind 的基本用途是**动态更新 HTML 元素上的属性，比如 id 、

class** 等

4、v-on——————它用来 绑定事件监听器

在普通元素上， v-on 可以监听原生的 DOM 事件，除了 click 外，还有

dblclick、 keyup, mousemove 等。表达式可以是一个方法名，这些方法都

写在 Vue 实例的 methods 属性内，并且是函数的形式，函数内的 this 指向

的是当前 Vue 实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数

据

vue中用到的所有方法都定义在methods中

<style>
    .transRed{
        background-color:red;
        height:30px;
    }
    </style>

<div id="abc">
        <span v-text='content'></span>
        <div v-html='contentHtml'></div>
        <div v-bind:class="className"></div>
        <button v-on:click="count">{{countNum}}</button>
    </div>

var app2=new Vue({
        el:'#abc',
        data:{
           content:'fff',
           contentHtml:'<span style="color:blue">我是html</span>',
           className:'transRed', //提前定义一个transred的属性
           countNum:0
        },
        methods:{
            count:function(){
                this.countNum +=1
            }//点击按钮加一
        }
    })

4、语法糖

语法糖是指在不影响功能的情况下，添加某种简洁方法实现同样的效果，从而更加方便程

序开发。

v-bind ——> : (冒号)

v-on ——> @

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

ASP.NET AJAX in Action

Alessandro Gallo、David Barkol、Rama Vavilala / Manning Publications / 2007-9-3 / USD 44.99

Ajax has revolutionized the way users interact with web pages today. Gone are frustrating page refreshes, lost scroll positions and intermittent interaction with a web site. Instead, we have a new gen......一起来看看《ASP.NET AJAX in Action》这本书的介绍吧!

码农工具