Vue 中双向绑定数据

最新推荐文章于 2022-08-12 20:53:56 发布

梓鸿

最新推荐文章于 2022-08-12 20:53:56 发布

阅读量245

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_42928918/article/details/89224114

版权

Vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Vue 中双向绑定数据

1、文本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input v-model="message" placeholder="edit me">
            <p>Message is: {{ message }}</p>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</html>

结果：

2、多行文本

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span>Multiline message is:</span>
            <p style="white-space: pre-line;">{{ message }}</p><br>
            <textarea v-model="message" placeholder="add multiple lines"></textarea>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</html>

结果：