P6 Vue双向绑定 v-model

蝶衣_疯魔

于 2020-04-04 23:54:14 发布

阅读量139

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/shujuku____/article/details/105320304

版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

在这里插入图片描述

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