Vue---模板语法

最新推荐文章于 2024-09-13 07:19:45 发布

Listener-1379

最新推荐文章于 2024-09-13 07:19:45 发布

阅读量200

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_45965358/article/details/115383611

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章目录

一.文本
二.插入HTML
三.绑定动态属性
四.监听事件初步

一.文本

使用双大括号 {{ }}，非常简单，双大括号的内容将替换为它的值。
当然，你也可以使用v-once一次性的插值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "app">
    <span>{{message}}</span>
    <span v-once>{{message}}</span>
</div>
<script src = "../js/vue.js"></script>
<script type = "text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue",
        },
    })
</script>
</body>
</html>

我们看到当我们修改message的时候，没有用v-once的值会跟着改变，而使用了v-once的值不会变。
在这里插入图片描述

二.插入HTML

我们直接在{{ }}里写的内容会被解析为文本，只有我们使用v-html，才会对html进行解析。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "app">
    <span>{{message}}</span>
    <br/>
    <span v-html="message"></span>
</div>
<script src = "../js/vue.js"></script>
<script type = "text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            message:"<span >Hello world</span>"
        },
    })
</script>
</body>
</html>

在这里插入图片描述

三.绑定动态属性

我们使用v-bind:可以将属性值与我们的变量进行动态的绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type = "text/css">
        #css1{
            background-color:red;
        }
        #css2{
            background-color:blue;
        }
    </style>
    <script src = "../js/vue.js"></script>
</head>
<body>
<div id = "app">
    <span v-bind:id = "myId">{{message}}</span>
</div>
<script type = "text/javascript">
    const app = new Vue({
        el: "#app",
        data: {
            message:"Hello Vue",
            myId: "css1",
        }
    })
</script>
</body>
</html>

当我们运行的时候，id使用了默认值css1
在这里插入图片描述
我们可以动态的修改id的值。

可以看到，id变为了css2。
注意：myId = “css2” 不要漏掉双引号。

四.监听事件初步

我们使用v-on它能对按钮事件做出反应。
如下，点击按钮，整屏幕变绿色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/vue.js"></script>
</head>
<body>
<div id = "app">
    <button v-on:click = "myButton">按钮</button>
</div>
<script type = "text/javascript">
    const app = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            myButton:function(){
                document.body.style.background = "green";
            }
        }
    })
</script>
</body>
</html>