Vue的数据绑定、过滤器

目录

一、数据绑定 

        1、文本插值，使用双大括号{{}}

        2、插入html

         3、v-bind属性样式绑定，

         4、表达式

二、过滤器

        1、全局过滤器

         2、应用filters选项定义本地过滤器

---

 

一、数据绑定 

        1、文本插值，使用双大括号{{}}

<div id="element">{{text}}</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            text: 'Hello world'
        }
    })
</script>

        2、插入html

双大括号会把里面的值当做普通文本来处理，如果想要输出真正的html内容，需要使用v-html指令

<div id="element">
    <div v-html="text"></div>
</div>
<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            text: '<h1>Hello world<h1/>'
        }
    })
</script>

         3、v-bind属性样式绑定，

双大括号不能应用在html属性中，如果要为html元素绑定属性，需要使用 v-bind指令进行属性绑定，v-bind常见的有：v-bind:href、v-bind:class、v-bind:src、v-bind:is等、可简化为 :href 、:class 的形式

<style>
    h1{
        color: red;
    }
</style>

<div id="element">
    <div v-html="text" v-bind:class="textStyle"></div>
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            text: '<h1>Hello world<h1/>',
            style: 'h1'    
        }
    })
</script>

         4、表达式

在双大括号括号标签中进行数据绑定，标签中可以是一个javascript的表达式，这个表达式可以是常量、变量、运算符组成的句子，仅可以是表达式，不能是一个语句。

<div id="element">
    {{ text=='Hello world' ? 'yes' : 'no' }}
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">
    var demo = new Vue({
        el: '#element',
        data: {
            text: 'Hello world'   
        }
    })
</script>

二、过滤器

        需要一些复杂计算的数据绑定，简单的表达式可能无法实现，这时候需要使用过滤器 。

        1、全局过滤器

Vue.js提供了全局方法Vue.filter()定义过滤器，格式如下：Vue.filter( 'ID',function() {} ) ,第一个参数为过滤器绑定的id，第二个为具体函数

<div id="element">
    {{ text | newText  }}
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    Vue.filter('newText',function(text){
        text='New '+text;
        return text;
    }
    )

    var demo = new Vue({
        el: '#element',
        data: {
            text: 'Hello world'   
        }
    })
</script>

         2、应用filters选项定义本地过滤器

如下，串联使用过本地滤器，先调用firstText方法，在text字符串添加‘first’，再调用secondText方法，text字符串再添加字符‘second’

<div id="element">
    {{ text | firstText | secondText  }}
</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    Vue.filter('newText',function(text){
        text='New '+text;
        return text;
    }
    )

    var demo = new Vue({
        el: '#element',
        data: {
            text: 'Hello world'   
        },
        filters:{
            firstText:function(text){
                return 'first '+text;
            },
            secondText:function(text){
                return 'second '+text;
            }
        }
    })
</script>