过滤器 指令 事件

chenfeng900000029
180 阅读2分钟

时间显示的demo

<body>
    <div id="time">
        {{date}}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#time',
        data:{
            date:new Date()
        },
        mounted:function(){
            var _this = this
            _this.timer=setInterval(function(){
                _this.date = new Date()
            },1000)
        },
        beforeDeatory:function(){
            if(_this.date){
                clearInterval(_this.date)
            }
        }
    })
</script>

将上边显示的时间 过滤下

<body>
    <div id="time">
        {{date | filterTime}}  //  filterTime 过滤器的名字
    </div>
</body>
<script>
//单时间 前面加
function pad(value){
   return value > 10 ? value : '0'+value
}  
    var app = new Vue({
        el:'#time',
        data:{
            date:new Date()
        },
        filters:{
            filterTime:function(value){
                var date = new Date(value)
                var year = date.getFullYear()
                var month = date.getMonth()
                var day =date.getDate()
                var time = date.getHours()
                var min = date.getMinutes()
                var sec = date.getSeconds() 
                   console.log(year) 
                return year + '-' + month + '-' + day + ' ' + time + ':' + min + ':' + sec    
            }
        },
        mounted:function(){
            var _this = this
            _this.timer=setInterval(function(){
                _this.date = new Date()

            },1000)
        },
        beforeDeatory:function(){
            if(_this.date){
                clearInterval(_this.date)
            }
        }
    })
</script>
  • {{date | filterTime | filterTime2 }} 后面可以接多个过滤器/ 还可以接受参数
  • {{date | filterTime（'aug1',555）） | filterTime2 }}
filters:{
            filterTime:function(value,a,b){
               // a就是 aug1
               // b就是555
            }
        }

指令 事件 v-text v-html v-bind v-on

  • v-text
<body>
    <div id="app">
        <span v-text="pp"></span>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            pp:'context'
        }
    })
</script>

'页面中显示 context 效果等同于{{pp}}'  只解析纯文本
  • v-html
<body>
    <div id="app">
        <span v-html='ac'></span>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            ac:'<span class="nav">html</span>'
        }
    })
</script>

'页面显示 html 但是html文件中是这样    
<span v-html='ac'>
    <span class="nav">html</span>
</span> 
也就是说ac 被解析了
'
  • v-bind 绑定获得属性 v-bind: 后接的是冒号
<body>
    <div id="app">
        <span v-bind:class='className'></span>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            pp:'context',
            ac:'<span class="nav">html</html>',
            className:'excuse'
        }
    })
</script>`

'html 中<span v-bind:class='className'></span>
 解析为 <span class='className'></span>'
 v-bind可以简写成为 :class='className'
  • v-on 用来绑定事件监听器 ##vue中用到的所有方法都定义在methods中##
<body>
    <div id="app">
        <span v-text="pp"></span>
        <span v-html='ac'></span>
        <span v-bind:class='className'></span>
        <button v-on:click="count">{{number}}</button>
    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            pp:'context',
            ac:'<span class="nav">html</html>',
            className:'excuse',
            number:0
        },
        methods:{
            count:function(){
                this.number=this.number+1;
            }
        }
    })
</script>

'每次点击button + 1  v-on: 可以简写成 @:click="count"'
avatar
文章
阅读
粉丝