Vue 中双向绑定数据

佚名 6年前 (2019-04-10) 随笔 526人围观抢沙发百度已收录

1、文本

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

<!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>