Vue的插值与表达式

正常情况我们在页面取值都是通过 {{ data }}来取值，但是有时候我们就是想输出HTML，而不是将数据解析后的纯文本，这个时候可以使用v-html来绑定数据

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

<script>
export default {
  data() {
    return {
      link: '<a href="http://www.jinzhea.xyz">这是一个链接</a>'
    };
  }
};
</script>

这样在页面上渲染出来的就是一个具有点击功能的a标签，而不是纯文本，如下图所示，不过这里要注意如果将用户生产的内衣用v-html输出后，有可能导致XSS攻击，所以要在服务端对用户提交的内容进行处理，一般可将尖括号“<>”转义。

 

如果想显示{{ }}标签，而不进行替换，使用v-pre即可跳过这个元素和它的子元素的编译过程，例如

<span v-pre> {{ 这是不会编译的内容 }} </span>

 

在Vue的{{ }}中,除了简单的绑定属性值外，还可以使用JavaScript表达式进行简单的运算、三元表达式等，例如

　　{{ number / 10 }}
   {{ isOk ? '是' : '否' }}
   {{ text.split(',').reverse().join(',') }}

显示结果为

 

Vue.js只支持单个表达式，不支持语句和控制流。另外，在表达式中，不能使用用户自定义的全局变量，只能使用Vue白名单内的全局变量，例如Math和Date，以下是一些无效的实例：

　　　<!-- 这是语句，不是表达式 -->
    {{ let a = 'http://www.jinzhea.yxz' }}
    
    <!-- 不能使用控制流，要使用三目表达式 -->
    {{ if (Ok) return msg }}

 

 

嗯，就酱~~