P6 Vue双向绑定 v-model

在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>

<meta charset="UTF-8" xmlns:v-on="http://www.w3.org/1999/xhtml">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
   请输入:<input v-model="message">
    <p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:''
        }
    });
</script>

</body>
</html>

在这里插入图片描述

提供一个空值为禁用选项

<!DOCTYPE html>

<meta charset="UTF-8" xmlns:v-on="http://www.w3.org/1999/xhtml">
<title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
  <!-- 请输入:<input v-model="message">
    <p>{{message}}</p>-->
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>选择了:{{selected}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            selected:''
        }
    });
</script>

</body>
</html>

在这里插入图片描述

发布了242 篇原创文章 · 获赞 7 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/shujuku____/article/details/105320304