vue(3)

最新推荐文章于 2023-07-10 08:39:59 发布

Stephen_Numb

最新推荐文章于 2023-07-10 08:39:59 发布

阅读量330

点赞数 1

本文链接：https://blog.csdn.net/Stephen_Numb/article/details/53976819

版权

在使用{{}}显示数据的时候，遇到网络不佳的情况，{{}}会显示出来，不过vue提供了防止闪烁的方法v-text和v-html，对于v-text来说，和{{}}是等价的，比如{{msg}}和v-text="msg"是等价的，而且在网络不好的时候，v-text也不会出现花括号。对于v-html来说，当msg中出现html标签的时候，v-text是不能够转义这些标签的，所以这个时候就需要用到v-html，v-html的用法也很简单，和v-text一样。

在应用中，我们可能会遇到这种情景，当一个值发生改变的时候，另外一个值也会发生改变，如果在模板中放入大量的逻辑的话，会显得很臃肿。这个时候，我们就需要用到vue的计算属性了。我们可以像绑定普通属性一样，绑定计算属性。我个人觉得这个计算属性有一点点绕，不过使用起来还是挺舒服的。下面展示一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div class="box">
<span v-html="a"></span><br>
<span v-html="b"></span>
</div>
</body>
<script>
new Vue({
el:'.box',
data:{
a:2
},
computed:{
b:function () {
return this.a+1
}
}
})
</script>
</html>