Vue插入值与过滤器

双大括号语法{{}}/ v-text

<!-- v-text

双大括号语法 {{}} 文本插值

如果想显{{}}标签不被替换，使用v-pre跳过此元素和他子元素的编译过程

{{}} 还支持单个表达式，简单的运算，三元运算等

-->

< h3 v-pre >{{ name}} </ h3 >

< h3 >{{ name}} </ h3 >

< h3 >{{ number/ 3 }} </ h3 >

< h3 >{{ number/ 3> 0 ? 'true': 'false' }} </ h3 >

v-html 

<!-- v-html

如果想输出HTML而不是将数据解析后的纯文本，使用v-html

使用v-html输出后可能会倒是XSS攻击，对于用户提供的内容要将 '<>' 转译

-->

< div v-html=" link" ></ div >

 

filter

分为本地过滤器和全局过滤器  https://cn.vuejs.org/v2/guide/filters.html

 

<!-- filter

过滤器

{{}}插入值的尾部添加一个管道符 "|" 对数据进行过滤。经常用于格式化文本

过滤器也是可以串联，也可以接受参数

{{name| filterA| filterB}}

{{name|formartDataC('arg1','arg2')}} arg1，arg2接受的第二个第三个参数

过滤器主要是用于简单的文本转换，如果需要更复杂的数据变换，应用计算属性

-->

< h3 >{{ name | formartData}} </ h3 >

< h3 >{{ name | formartData| formartDataB}} </ h3 >

< h3 >{{ name| formartDataC( '/')}} </ h3 >

< hr >

 

// .js 

filters: {

/**

* value指的是需要过滤的数据

*/

formartData( value) {

return value. split( ""). join( "-");

},

formartDataB( value) {

return value. split( "-"). join( "*");

},

formartDataC( arg1, arg2) {

return arg1. split( ""). join( arg2);

}

}

 

转载于:https://www.cnblogs.com/niusan/p/10388811.html