P6 Vue双向绑定 v-model

最新推荐文章于 2024-10-10 17:02:40 发布

原创最新推荐文章于 2024-10-10 17:02:40 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

14 篇文章

订阅专栏

本文展示了一个使用Vue.js框架的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>
</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>