vue day1 插值表达式属性绑定

最新推荐文章于 2023-10-24 10:26:15 发布

tnan2522

最新推荐文章于 2023-10-24 10:26:15 发布

阅读量524

点赞数

分类专栏： 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 中的数据的标签数据也会发生改变

v-if v-show 控制

v-if 可以控制标签是否存在，尽量少用，操作dom 元素需要资源多，

在这里插入图片描述

可以看到，当 Vue 中data 区域的 if_true 为false 时，浏览器中的HTML 标签中 p 标签完全消失了

v-show 通过display 来控制标签是否显示，一般都使用
在这里插入图片描述

可以看到，使用了v-show 时， p 标签就被display 给隐藏了，

v-for循环

在vue 中可以在HTML将标签进行循环的，如：
在这里插入图片描述
可以将vue 中data 中的数据进行循环，循环出来的数据会以当前for 循环的标签和子标签中循环生成多个标签数据进行填充

tnan2522

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue day1 插值表达式属性绑定

插值表达式：在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
复制链接

扫一扫