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>

 

结果：

 

posted @ 2019-04-10 16:02  随★风  阅读(209)  评论(0)  编辑  收藏  举报