<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="Vue.2.6.10.js"></script>
</head>
<body>
<!-- v-model在文本域的用法 -->
<div id="app1">
<textarea name="" v-model="text" id="textarea" cols="30" rows="10"></textarea><!--拼音不会更新-->
<textarea name="" @input = 'handleInput' id="textarea" cols="30" rows="10"></textarea><!--实时更新-->
<!-- 使用v-model以后，其显示的值只依赖绑定的数据，初始化的value属性和textarea标签之间的值都不会起作用 -->
<p>输入内容：</p>
<p style="white-space: pre;">{{ text }}</p>
</div>
<div id="app2">
<input type="radio" :checked = 'picked' @click = 'toggleChecked'>
<label for="">单选按钮</label>
</div>
<!-- 组合使用实现互斥选择 -->
<div id="app3">
<input type="radio" v-model="picked" value="html！" id="html">
<label for="html">Html</label>
<br>
<input type="radio" v-model="picked" value="css!" id="css">
<label for="css">Css</label>
<br>
<input type="radio" v-model="picked" value="js!" id="js">
<label for="js">JavaScript</label>
<br>
<p>被选中的项：{{ picked }}</p><!--输出的是value中的值-->
<!-- 原理：v-model配合value，点击按钮/标签——
v-model你可以理解成是value的更高级，：value（v-bind）属于数据单向绑定，v-model属于双向绑定
v-model官方给出的说法是：这其实是一个简写的形式，v-model实际执行的是下面的绑定：
<input type="text" v-bind:value="dataA" v-on:input="dataA = $event.target.value" />
在本例中则是：<input type="text" v-bind:value="picked" v-on:click="picked = $event.target.value" />
v-model是动态绑定值到value，然后监听input的input事件获取值后赋给dataA的一个过程。 -->
</div>
<!-- 复选框 -->
<div id="app4">
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择状态：{{ checked }}</label>
<br>
<input type="checkbox" v-model="multichecked" value="html！" id="html">
<label for="html">Html</label>
<br>
<input type="checkbox" v-model="multichecked" value="css!" id="css">
<label for="css">Css</label>
<br>
<input type="checkbox" v-model="multichecked" value="js!" id="js">
<label for="js">JavaScript</label>
<br>
<p>被选中的项：{{ multichecked }}</p>
</div>
<div id="app5">
<select v-model="selected" id="" multiple>
<!-- 如果option含有value属性，v-model就会优先匹配value的值，如果没有就会匹配option标签内的text -->
<!-- 给select添加multiple就可以多选 -->
<!-- 在业务中通常用v-for动态输出option、value与text -->
<option>html</option>
<option>css</option>
<option>js</option>
<option>jq</option>
<option>vue</option>
</select>
<p>选择的项：{{ selected }}</p>
</div>
<!-- 绑定值 -->
<div id="app6">
<input type="radio" v-model="picked" :value="value">
<!-- 别忘了v-model会匹配value的值 -->
<label for="">单选按钮</label>
<p>{{ picked }}</p>
<p>{{ value }}</p>
<input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2" >
<label for="">复选框</label>
<p>{{ toggle }}</p>
<p>{{ value1 }}</p>
<p>{{ value2 }}</p>
</div>
<!-- 常见的表单修饰符 -->
<div id="app7">
<input type="text" v-model.lazy="message">
<!-- 在输入框内容发生改变后才更新 -->
<p>{{ message }}</p>
<input type="text" v-model.number="messageNum">
<!-- 将输入转换为number类型 -->
<p>{{ messageNum }}</p>
<input type="text" v-model.trim="messageTrim">
<!-- 过滤首尾空格 -->
<p>{{ messageTrim }}</p>
<!-- 都会同时影响输入框中的值 -->
</div>
</body>
<script>
var app1 = new Vue({
el:"#app1",
data:{
text:''
},
methods: {
handleInput:function(e){
console.log(e,e.target);
this.text = e.target.value;
//InputEvent {isTrusted: true, data: "s", isComposing: true, inputType: "insertCompositionText",
// dataTransfer: null, …}
// <textarea name id="textarea" cols="30" rows="10"></textarea>
}
},
});
var app2 = new Vue({
el:"#app2",
data:{
picked:true
},
methods:{
toggleChecked:function(){
this.picked = !this.picked;
}
}
});
var app3 = new Vue({
el:"#app3",
data:{
picked:''
}
});
var app4 = new Vue({
el:"#app4",
data:{
checked:'',//这里应该是Vue内置的吧，不然真的没道理...
// multichecked:'' 会变为true/false，错误写法
multichecked:[]
}
});
var app5 = new Vue({
el:"#app5",
data:{
selected:['html','css'],//要用ctrl+option的方式多选也是醉了
},
});
var app6 = new Vue({
el:"#app6",
data:{
picked:false,
value:123,//选中时app.picked===app.value
toggle:false,
value1:'a',//选中：app.toggle === app.value1，反之value2 这个应该也是自带的吧...
value2:'b'
}
});
var app7 = new Vue({
el:"#app7",
data:{
message:'',
messageNum:'',
messageTrim:''
},
});
</script>
</html>