Vue的数据渲染

最新推荐文章于 2023-01-01 17:21:45 发布

huangguanhang

最新推荐文章于 2023-01-01 17:21:45 发布

阅读量4.7k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/huangguanhang/article/details/124693875

版权

一插值表达式

1插值表达式就是vue实现数据渲染到页面的方式，不需要进行Dom操作直接将数据展示在页面

2插值表达式就是 { {}} 里面可以执行代码

但是我们要注意使用插值表达式渲染数据的时候会出现插值闪烁的现象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值闪烁</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<!--  使用插值表达式会出现插值闪烁的问题-->
    <div id="constior">
        <h1>{
  {name}}</h1>
    </div>
<script>
    setInterval(()=>{
        new Vue({
                el:"#constior",
                data:{
                    name:"出现卡顿"
                }
            })
    },3000)
</script>
</body>
</html>

这里我们通过定时器可以看到当网络延迟加载的时候，我们可以在页面中看到插值表达式的语法，只有网络加载好之后数据才会渲染

二，通过v-text和v-html 渲染数据

在JavaScript中，数据渲染通过：innerText innerHTML

在jQuery中，数据渲染通过：text() html()

在vue中，数据渲染通过：v-text v-html

1 v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script src="../vue.min.js"></script>
</head>
<body>
<div id="constior">
    <h1 v-text="name"></h1>
    <h2 v-text="ljie"></h2>
</div>
<script>
    new Vue({
        el:"#constior",
        data:{
            name:"出现卡顿",
            ljie:"<a href='http://www.huya.com'>欢迎

最低0.47元/天解锁文章

huangguanhang

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue的数据渲染

一插值表达式1插值表达式就是vue实现数据渲染到页面的方式，不需要进行Dom操作直接将数据展示在页面2插值表达式就是 {{}} 里面可以执行代码但是我们要注意使用插值表达式渲染数据的时候会出现插值闪烁的现象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>插值闪烁</title> <script sr
复制链接

扫一扫