Vue —— 表单控件绑定

  • v-model
  • input [type="text"]
为表单控件元素创建双向数据绑定（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量）
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form_control.html</title>
    <script src="../js/vue.js"></script>
    <link type='text/css' rel='styleSheet' href='../css/style.css' >
</head>

<body>
    <div id="example">
        <!-- 即文本框的内容跟 "content" 的内容是实时绑定的, placeholder是水印 -->
        <input type="text" v-model="content" placeholder="快来编辑我吧">
        <p>Message is: {{content}}</p>
        <!-- 同时绑定都会改变内容 -->
        <textarea v-model="content" placeholder="不少于100字内容" rows="8" cols="30"></textarea>
    </div>
</body>
<script>
    new Vue({
        el: "#example",
        data: {
            content: "我爱学习，学习使我快乐"
        },
        methods: {

        }
    });
</script>
</html>

 

posted @ 2020-10-24 09:43  a最简单  阅读(131)  评论(0)    收藏  举报