表单相关
<script setup> import { ref } from "vue"; const message = ref("hello"); const checked = ref(); const checkedNames = ref([]); const picked = ref(); const selected = ref(); const mulSelected = ref([]); const num = ref(5); const name = ref("John"); const msg = ref("hello"); </script> <template> <div> <el-row :gutter="5"> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>文本</span> </div> </template> <div> <p>Message is: {{ message }}</p> <p><input v-model="message" placeholder="edit me" /></p> </div> </el-card> </el-col> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>多行文本</span> </div> </template> <div> <p>Message is: {{ message }}</p> <p> <textarea v-model="message" placeholder="add multiple lines" ></textarea> </p> </div> </el-card> </el-col> </el-row> <el-row :gutter="5"> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>复选框</span> </div> </template> <div> <p>是否同意: {{ checked }}</p> <p> <input type="checkbox" id="checkbox" v-model="checked" true-value="yes" false-value="no" /> <label for="checkbox">同意</label> </p> <p>Checked names: {{ checkedNames }}</p> <p> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" /> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames" /> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" /> <label for="mike">Mike</label> </p> </div> </el-card> </el-col> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>单选按钮</span> </div> </template> <div> <p>Picked: {{ picked }}</p> <p> <input type="radio" id="one" value="One" v-model="picked" /> <label for="one">One</label> <input type="radio" id="two" value="Two" v-model="picked" /> <label for="two">Two</label> </p> </div> </el-card> </el-col> </el-row> <el-row :gutter="5"> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>选择器</span> </div> </template> <div> <p>Selected: {{ selected }}</p> <p> <select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> </p> <p>Selected: {{ mulSelected }}</p> <p> <select v-model="mulSelected" multiple> <option>A</option> <option>B</option> <option>C</option> </select> </p> </div> </el-card> </el-col> <el-col :span="12"> <el-card class="box-card"> <template #header> <div class="card-header"> <span>修饰符</span> </div> </template> <div> <p> <span>{{ msg }}</span> <br /> <input v-model.lazy="msg" />.lazy 在 "change" 事件后同步更新而不是 "input" </p> <p> <span>{{ num }}</span> <br /> <input v-model.number="num" />.number 用户输入自动转换为数字,如果该值无法被 parseFloat() 处理,那么将返回原始值。 </p> <p> <span>{{ name }}</span> <br /> <input v-model.trim="name" />.trim自动去除用户输入内容中两端的空格 </p> </div> </el-card> </el-col> </el-row> </div> </template> <style scoped> .el-row { margin-top: 0.5rem; } </style>
标签:const,Selected,表单,学习,num,vue3,message,ref From: https://www.cnblogs.com/caroline2016/p/17928169.html