Vue 模版赋值语法

最新推荐文章于 2024-06-07 16:03:08 发布

Code攻城狮

最新推荐文章于 2024-06-07 16:03:08 发布

阅读量915

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/helpluozhao123/article/details/127927789

版权

一、差值表达式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="app">
        {{name}}
    </div>
    
    <script>
    let vm =new Vue({
       el:"#app",
       data:{
           name:"dell"
       }
    })
    </script>
</body>
</html>

二、v-text语法向标签中赋值:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    
    <div id="app">
        <div v-text="name"></div>
    </div>


    <script>

    let vm =new Vue({
       el:"#app",
       data:{
           name:"dell"
       }


    })

    </script>
</body>
</html>

三、v-html

v-html 是让该标签的 innerHtml方式进行赋值;

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    
    <div id="app">
        <div v-text="name"></div>
        <div v-html="name"></div>
    </div>


    <script>
    let vm =new Vue({
       el:"#app",
       data:{
           name:"dell"
       }
    })
    </script>
    
</body>
</html>