Vue.js--插值与表达式

Bertha 。 2021-08-13 12:57 356阅读 0赞

使用双大括号(Mustache语法) "\{ \{\}\}"是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，例如：

<div id="myApp">{
       {str}}</div>
    <script> var app = new Vue({ el: '#myApp', data: { str: '测试' } }); </script>

通过任何方法修改数据str，大括号的内容都会被实时替换，比如下面的这个实例，实时显示当前的时间，每秒更新。

<div id="myApp">{
       {date}}</div>
    <script> var app = new Vue({ el: '#myApp', data: { date: new Date() }, mounted: function(){ var _this = this;//声明一个变量指向Vue实例的this，保证作用域一致 this.timer = setInterval(function(){ _this.date = new Date();//修改数据date }, 1000); }, beforeDestroy: function(){ if(this.timer){ clearInterval(this.timer);//Vue实例清除前，销毁定时器 } } }); </script>

![在这里插入图片描述][20191008090913226.png]

如果有的时候就是想输出HTML，而不是将数据解释后的纯文本，可以使用v-html；

<div id="app">
    	<span v-html="link"></span>
    </div>
    <script> var vm = new Vue({ el: '#app', data: { link: '<a href="#">这是一个链接</a>' } }); </script>

link的内容将会被渲染为一个具有点击功能的a标签，而不是纯文本。这里要注意，如果将用户产生的内容使用v-html输出后，有可能倒是XSS攻击，所以要在服务端对用户提交的内容进行处理，一般将尖括号"<>"转义。

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

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

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

<div id="app">
        {
       {number / 10}}
        {
       {isOK ? '确定' : '取消'}}
        {
       {text.split(',').reverse().join(',')}}
    </div>
    <script> var vm = new Vue({ el: "#app", data: { number: 100, isOK: false, text: '123,456' } }); </script>

显示结果：  
![在这里插入图片描述][20191008092308274.png]

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

无效的示例：

{ { var book = 'Vue.js'}}
    
    { {  if(ok) return msg }}

[20191008090913226.png]: /images/20210813/5649b36059734990b8fa756a0ad06982.png
[20191008092308274.png]: /images/20210813/ba05ecb14511482498ef7d1ebf185cd6.png