Vue如何将数据显示在页面中

如何将data的数据显示在页面中

1.文本插值:{{}}

	<div id="root">{{msg}}</div>  
	<script>
		new Vue({
			el:"#root", 
			data:{   
				msg:'hello world'
			},
		})
	</script>

渲染结果

	<div id="root">hello world</div>  

2.原始HTML插值:v-html、v-text
区别:v-text不会对标签进行转义而v-html会对标签进行一次转义

以v-text为例
在这里插入图片描述

渲染结果:
在这里插入图片描述
以v-html为例
在这里插入图片描述

渲染结果:
在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue,我们可以使用数据绑定或生命周期钩子函数来将后端数据添加到页面实例。 一种常见的方法是使用数据绑定。我们首先需要在页面实例的数据定义一个属性,用来存放后端数据。例如,我们可以在data选项定义一个名为backEndData的属性。然后,我们可以使用Vue数据绑定语法(双花括号)将后端数据绑定到页面上的元素。例如,在页面的某个元素上,我们可以使用{{ backEndData }}来显示后端数据。 另一种方法是使用Vue的生命周期钩子函数。在Vue的created生命周期钩子函数,我们可以发送HTTP请求获取后端数据,并将数据保存到页面实例的属性。例如,我们可以使用Vue的内置axios库发送一个GET请求来获取后端数据,并将数据保存到backEndData属性。这样,在页面加载完成后,我们就可以在页面上使用backEndData属性数据了。 下面是一个示例代码: ``` <template> <div> <div>{{ backEndData }}</div> </div> </template> <script> import axios from 'axios'; export default { data() { return { backEndData: null } }, created() { axios.get('/api/data') .then(response => { this.backEndData = response.data; }) .catch(error => { console.log(error); }); } } </script> ``` 在上述代码,我们在页面加载完成后,通过发送一个GET请求来获取后端数据,并将数据保存到backEndData属性。然后,在页面上使用双花括号语法将backEndData属性数据显示出来。 通过以上两种方法,我们可以很方便地将后端数据添加到Vue页面实例,并在页面上使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值