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

}

}