01 Vue数据绑定、插值表达之、过滤器

数据双向绑定：v-model=""

访问元素：app.$el，app为Vue实例，通过$el访问Vue绑定对象的html元素，同原生js 或 jQuery 所取得的对象一样

插值与表达式：{{  }}

过滤器：{{ data | filter }}

跳过数据绑定：v-pre

示例代码：

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-model="name" placeholder="your Name">
        <!-- v-model 数据绑定 -->
        <!-- placeholder 缺失占位符 -->
        <h1>Hello , {{ name }}</h1>
        <div> {{ num / 10 }} </div>
        <div> {{ isOk ? 'Ok' : '!OK' }} </div>
        <div> {{ num | filterA('A') | filterB('B') }} </div>
        <div v-pre> {{ 此处不会被编译 }} </div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: '',
                num: 100,
                isOk: false
            },
            filters: {
                filterA: function (e1, e2) {
                    return e1 + e2
                    // 第二个参数为filter传入的参数
                    // 此处将return 100A
                },
                filterB: function (e1, e2) {
                    return e1 + e2
                }
            }
        })
        console.log(app.$el.innerHTML)
    </script>
</body>

</html>

 

posted @ 2020-08-27 23:33  MobiusMap  阅读(207)  评论(0)  编辑  收藏  举报