Vue插入值与过滤器

vue

<!-- v-text

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

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

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

-->

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

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

<!-- v-html

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

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

-->

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

<!-- filter

过滤器

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

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

{{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);

}