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

一、过滤器

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

我特别容易写错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 ——> @

我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/dev...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券