Vue框架整理：插值、表达式与过滤器

我不是女神ヾ 2022-05-23 13:51 201阅读 0赞

![这里写图片描述][70]

### 插值 与 表达式 ###

1、 双大括号：\{ \{ \}\}     是最基本的“文本”插值方法，能够实时显示我们需要的数据

![这里写图片描述][70 1] \{ \{ \}\} 也可以直接在HTML中直接使用JavaScript的部分表达式进行一些简单运算：

<body> <div id="v1"> <p> { { today.split("") }} </p> <p> { { mood ? "放松" : "高兴" }} </p> </div> <script src="vue.min.js"></script> <script> var app=new Vue({ el:"#v1", data:{ today:"今天是周末", mood:true } }) </script>

页面显示：

![这里写图片描述][70 2]

这里需要注意一下，目前只支持单个表达式、并且不能使用自定义变量，只能用Vue白名单内的全部变量，Date , Math等；

--------------------

2、 v-pre ： 这个不会将 双大括号\{ \{ \}\} 进行转义

<p v-pre>{ { escaped }}</p>

页面上显示 ： \{ \{ no escaped \}\}

没有将\{ \{ \}\}中内容进行转义，直接输出括号里的信息

--------------------

3、v-html 直接渲染出 HTMLElement

<body>
    
    <div id="v1">
        <span v-html="link"></span>
    </div>
    
    <script src="vue.min.js"></script>
    <script> var app=new Vue({ el:"#v1", data:{ link:"<button>vue按钮</button>" } }) </script>
    </body>

页面显示：  
![这里写图片描述][70 3]

![这里写图片描述][70]

Vue 过滤器  
可以用管道符 | 对数据进行过滤，过滤的规则自定义，然后通过Vue实例添加选项 filters设置

<body> <div id="v1"> { { date | setDate }} </div> <script src="vue.min.js"></script> <script> var app=new Vue({ el:"#v1", data:{ date:new Date() }, filters:{ setDate:function (value) { var date=new Date(value); var year=date.getFullYear(), m=date.getMonth()+1, month=m<10 ? "0"+m : m, d=date.getDate(), day=(d<10) ? "0"+d : d; return year+"-"+month+"-"+day; } } }) </script> </body>

过滤器也可以串联或接收参数：

语法：

串联： \{ \{ message | 方法1 | 方法2 \}\}

接收参数 ： \{ \{ message | 方法名（‘arguments1’ , ‘arguments2’）\}\}

简单的数据处理可以使用过滤器，遇到复杂的还是建议用其他方法计算比较好一些

[70]: /images/20220523/2dee71d7138d4306b27ab8d5a81c622e.png
[70 1]: /images/20220523/76a67fcc0e3445898b84ddf88bd6f395.png
[70 2]: /images/20220523/95d94738a338406d9eefa0c15ed835cd.png
[70 3]: /images/20220523/a3a8eba4472548188b665e9b686847d7.png