vue中的属性绑定和双向数据绑定

最新推荐文章于 2023-04-21 23:53:07 发布

乔小安呐

最新推荐文章于 2023-04-21 23:53:07 发布

阅读量181

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ZXCVBNM0_123456789/article/details/115179748

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js中的属性绑定和双向数据绑定。通过`v-bind`（可缩写为`:`）实现元素属性与Vue实例数据的绑定，例如在`

`标签中设置`title`属性。同时，`v-model`用于实现输入元素与Vue实例的双向数据绑定，使得页面内容可以随着用户输入实时更新。示例代码展示了如何在Vue实例中定义数据并将其绑定到页面元素上。

摘要由CSDN通过智能技术生成

tips：
摸板指令后面的字符串是，vue的属性，不是真正的字符串
2，简写：
v-on–>@
v-bind–>:
一、属性绑定

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="utf-8">
    <title>属性绑定和双向数据绑定</title>
    <script src = "vue.min.js"></script>
</head>
<body>
    <div id ="text">
        <div v-bind:title="'nihao   ' +title">你好呀</div><!--摸板指令后面的字符串不是真的字符串是vue对象中定义的
        属性，如果要拼接字符串的话就如同此行-->
        <div :title=title>你好呀</div> <!--摸板指令v-bind 可缩写为 ： 英文的冒号     v-on： 可缩写为 @ -->
    </div>
    <script>
        new Vue({
            el: "#text",
            data: {
                title: "this is hello world"
            }
        })

    </script>
</body>
</html>

二、双向数据绑定
单项绑定的意思是，数据决定页面，也就是说，后台给什么数据页面就显示什么内容，双向绑定的意思是，页面的显示不止有后台数据决定，也可以通过前台页面决定
代码如下：

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset="utf-8">
    <title>属性绑定和双向数据绑定</title>
    <script src = "vue.min.js"></script>
</head>
<body>
    <div id ="text">
   
        <input v-model = "content">
        <div>{{content}}</div>
    </div>
    <script>
        new Vue({
            el: "#text",
            data: {
                title: "this is hello world",
                content: "双向绑定"
            }
        })

    </script>
</body>
</html>

乔小安呐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的属性绑定和双向数据绑定

tips：摸板指令后面的字符串是，vue的属性，不是真正的字符串2，简写：v-on–>@v-bind–>:一、属性绑定<!DOCTYPE html><html lang = "en"><head> <meta charset="utf-8"> <title>属性绑定和双向数据绑定</title> <script src = "vue.min.js"></script&
复制链接

扫一扫