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