Vue.js--插值与表达式

最新推荐文章于 2024-02-01 17:54:39 发布

原创最新推荐文章于 2024-02-01 17:54:39 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #插值 #表达式

Vue.js 专栏收录该内容

39 篇文章

订阅专栏

本文详细介绍了Vue.js中使用双大括号进行文本插值的基本方法，包括实时显示数据、使用v-html渲染HTML内容、避免XSS攻击的策略，以及如何使用v-pre保留{{}

使用双大括号(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>

在这里插入图片描述

如果有的时候就是想输出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>

显示结果：
在这里插入图片描述

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

无效的示例：

<!-- 这是语句，不是表达式 -->
{{var book = 'Vue.js'}}
<!-- 不能使用流程控制，要使用三元运算符 -->
{{ if(ok) return msg }}