P6 Vue双向绑定 v-model

<!DOCTYPE html><meta charset="UTF-8" xmlns:v-on="http://www.w3.org/1999/xhtml"><title>Title</title></head><body><div id="app">...

蝶衣_疯魔

128人浏览 · 2020-04-04 23:54:14

蝶衣_疯魔 · 2020-04-04 23:54: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>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^