<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<!--v-model一般都是数据属性或者方法里面声明的****-->
<p>{{ msg }}</p>
<textarea placeholder="" v-model="msg"></textarea>
<!--只要绑定了v-model msg都会同时改变-->
<!--单个复选框-->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<!--多个复选框,绑定到同一个数组-->
<div id=‘example-3‘>
<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>
<br>
<span>Checked names: {{ checkedNames }}</span>
<br>
<!--for 和 id 一样的值作用就是 点击页面上的用户名就会自动聚集 跟点击输入框聚焦的效果一样-->
<label for="username">用户名:</label>
<!--懒监听-->
<input type="text" v-model.lazy="msg2" id="username">
<p>{{msg2}}</p>
<br>
<!--单选框 绑定的是父级标签select不是option 所以select额度跟 span里的selected有关联-->
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<!--多选绑定数组-->
<div id="example-6">
<select v-model="selected2" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected2 }}</span>
</div>
<br>
<!--清除前后空格-->
<input v-model.trim="msg3">
<p>{{msg3}}</p>
</div>
</div>
<script src="vue.js"></script>
<script>
// v-model 只能应用在 input textarea select标签中
//双向数据绑定:之前的操作都是数据到view的过程(return 返回的数据给回div里的msg)
//先有数据到view,更改view,再有反向的
//一开始return 里面的msg 在加载页面的时候就已经放在了div中显示msg的位置了,有了数据到view的过程
//更改view就是在input输入框里改输入框的变化,就是修改msg,
//这时候data中的msg会随着变化, 进而导致<p>里面的msg跟着改变
new Vue({
el: "#app",
data() {
return {
msg: "alex",
msg2:"wusir",
msg3:"",
checked: false,
checkedNames: [],
selected: "",
selected2:[],
}//怎么显示到input的输入框?以前是用过value属性,在vue里value属性会被忽略掉
}
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/kenD/p/10050080.html
时间： 2024-10-07 07:26:51