vue day1 插值表达式属性绑定

最新推荐文章于 2024-03-29 19:54:29 发布

tnan2522

最新推荐文章于 2024-03-29 19:54:29 发布

阅读量532

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_42031243/article/details/108050273

版权

web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

插值表达式：

在vue中插值表达式和Python中的jinja2语法有点相似，，都是 {{ 数据 }} 以大括号的形式来进行的

<html lang="en">

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">{{msg}}</div>

</body>
<script>
new Vue({
    el:"#app",
    data:{
        msg:"hello world"
    },
    methods: {
        
    },
    
})
</script>

</html>

可以看到，在id=app的div 标签中有一个 {{msg}}，这个特殊的符号可以将 script 中的 vue 中的data 中的msg 对应的数据填充到HTML标签中，

v-text

在这里插入图片描述
和{{msg}}同理，将 msg当做数据填充到HTML标签中

v-html

在这里插入图片描述
将vue 中的 msg 属性就是当中HTML标签放到div 标签中

v-bind 属性绑定

通过使用vue 中 bind 给HTML标签中的属性进行绑定，如：
在这里插入图片描述
给a标签中的 href 属性绑定数据，还可以绑定 class，style等属性

v-model 双向绑定

当我们使用vue中的数据的时候，一般都是从vue中data 数据区中获取数据的，要是我们想要通过html给 data 中的数据进行修改时怎么办呢？这时候就可以使用到了 v-model 双向绑定了，在HTML测试化时HTML中绑定data 属性数据会进行初始化，页面在浏览器上初始化结束后再浏览器上修改值相当于修改vue 中的数据，如：
在这里插入图片描述

可以看到，在浏览器中修改了 v-model绑定的数据后，其他使用到vue 中的数据的标签数据也会发生改变