基础语法
v-model
如果你觉得v-model的存在没有意义，那么一定是没有体会到v-model的强大之处。
该指令只能用于可输入的表单元素，通过双向数据绑定，可以获取到表单元素的值
v-model 实现TodoList添加任务
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Todolist</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h1>任务清单</h1>
<input type="text" v-model="text"> <button @click="addTodo">添加任务</button>
<ul>
<li v-for="item in todos">
任务{
{item.id + 1}}-{
{item.text}}
</li>
</ul>
</div>
<script>
let app = new Vue({
el: "#app",
data: {
text: "",
todos: [
{
id: 0, text: "俯卧撑100公里" },
{
id: 1, text: "跑步5个" }
]
},
methods: {
addTodo() {
if (this.text != '') {
this.todos.push({
id: this.todos.length, text: this.text.trim() })
this.text = ""
}
}
}
})
</script>
</body>
</html>
效果图示
注意
v-model 获得到的是 表单控件的 value 值
v-model 绑定input输入框
完整写法
<input type="text" v-model:value="name">
简写
<input type=:"text" v-model="name">
怎么用呢 v-model
表单输入绑定：
<input v-model="formData.username" placeholder="用户名">
<input v-model="formData.password" type="password" placeholder="密码">
在这个示例中，v-model 绑定了表单输入字段和 Vue 实例中的 formData 对象的相应属性。这样就可以实现表单输入数据的双向绑定。
多选框绑定：
<input type="checkbox" v-model="selectedItems" value="item1"> 选项1
<input type="checkbox" v-model="selectedItems" value="item2"> 选项2
<input type="checkbox" v-model="selectedItems" value="item3"> 选项3
在这个示例中，通过 v-model 将多个复选框与 Vue 实例中的 selectedItems 数组进行绑定。选中或取消选中复选框会自动更新数组中的值。
单选按钮绑定：
<input type="radio" v-model="selectedOption" value="option1"> 选项1
<input type="radio" v-model="selectedOption" value="option2"> 选项2
<input type="radio" v-model="selectedOption" value="option3"> 选项3
通过 v-model 将多个单选按钮与 Vue 实例中的 selectedOption 进行绑定。选择其中一个单选按钮会自动更新绑定的值。
下拉列表绑定：
<select v-model="selectedItem">
<option value="item1">选项1</option>
<option value="item2">选项2</option>
<option value="item3">选项3</option>
</select>
通过 v-model 将下拉列表与 Vue 实例中的 selectedItem 进行绑定。选择其中一个选项会自动更新绑定的值。
自定义组件绑定：
<custom-input v-model="customValue"></custom-input>
将自定义组件与 Vue 实例中的 customValue 进行双向绑定。在自定义组件中，需要使用 model 选项来配置输入和输出的值，并且通过 this.$emit('input', newValue) 在组件内部触发值的更新。
对计算属性进行双向绑定：
<input v-model="reversedMessage">
javascript
// 在 Vue 实例中定义计算属性
computed: {
reversedMessage: {
get() {
return this.message.split('').reverse().join('');
},
set(value) {
this.message = value.split('').reverse().join('');
}
}
}
将输入框与计算属性 reversedMessage 进行双向绑定。当用户在输入框中修改文本时，计算属性的 set 方法会被调用，从而更新原始数据的值。
使用修饰符定制 v-model 行为：
<input v-model.trim="username"> <!-- 去除首尾空格 -->
<input v-model.lazy="searchQuery"> <!-- 延迟输入响应 -->
<input v-model.number="quantity"> <!-- 将输入值转为数字 -->
在这个示例中，通过使用修饰符可以定制 v-model 的行为。例如，.trim 修饰符可以去除输入值的首尾空格，.lazy 修饰符可以延迟响应用户输入，.number 修饰符可以将输入值转为数字。
使用 get 和 set 函数控制 v-model 值的访问和更新：
<input :value="fullName" @input="fullName = $event.target.value">
javascript
// 在 Vue 实例中定义计算属性和方法
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName;
},
set(value) {
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
在这个示例中，通过使用 :value 属性绑定和 @input 事件监听，自己实现了 v-model 的功能。当输入框的值发生变化时，通过 @input 事件将新值赋给 fullName，同时在 get 和 set 函数中进行值的处理和更新。
需要注意的是，formData、selectedItems、selectedOption、selectedItem 和 customValue 、username、searchQuery、quantity都是 Vue 实例中的数据属性，可以在 Vue 实例中进行初始化和访问。当绑定的值发生变化时，相关的数据也会随之更新。
谢谢款待
