Vue2.5入门——属性绑定和双向数据绑定

最新推荐文章于 2022-03-02 00:27:29 发布

前台端茶工程师

最新推荐文章于 2022-03-02 00:27:29 发布

阅读量238

点赞数

分类专栏： Vue2.5入门

本文链接：https://blog.csdn.net/qq_33930360/article/details/82079857

版权

Vue2.5入门专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
    <!--属性绑定-->
    <!--v-bind:可以简写成冒号 : -->
    <div v-bind:title="title">hello world</div>

    <!--单向数据绑定：数据决定页面的显示，页面无法决定数据的内容-->
    <!--双向数据绑定：页面改变数据内容，数据内容改变页面-->
    <!--input的val值变成content的内容，在输入框中输入其他数据，导致下面div的内容也会改变-->
    <!--这里用到v-model指令-->
    <input v-model="content"/>
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
           title:"this is hello world",
            content:"this is content"

        }
    })
</script>
</body>
</html>