VueJS之数据双向绑定

最新推荐文章于 2023-03-09 14:25:54 发布

GaloisAlex

最新推荐文章于 2023-03-09 14:25:54 发布

阅读量208

点赞数 1

分类专栏： Vue 前端框架文章标签： Vue VueJS 前端框架 Vue数据双向绑定

本文链接：https://blog.csdn.net/qq_42110976/article/details/96483470

版权

Vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

前端框架

3 篇文章 0 订阅

订阅专栏

Vue基本代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gamacode.com</title>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>                //{{ 数据调用 }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>    //引入vue
<script>
    let app = new Vue({                    //申明对象
        el : '#app',                       //指定div使得Vue对象对其有效
        data : {                           //数据
            message : 'Hello World'
           }
    });
</script>
</body>
</html>

Vue双向数据绑定：

model数据
view视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gamacode.com</title>
</head>
<body>
<div id="app">
    <h1>{{ message }}</h1>
    <input type="text" v-model="message">            //v-model绑定数据键名
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    let app = new Vue({
        el : '#app',
        data : {
            message : 'Hello World'
        }
    });
</script>
</body>
</html>

优惠劵

GaloisAlex

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VueJS之数据双向绑定

Vue基本代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>gamacode.com</title></head><body><div id="app"> &l...
复制链接

扫一扫