1、双向数据绑定
方向1 - 数据绑定到DOM元素上
方向2 - DOM变化更新绑定的数据
表单元素:输入框,单选框,多选框...,用户可以操作来修改其值 -- 把用户操作的值更新给数据
v-model:数据绑定值的同时,DOM变化也会修改变量,用来快速获取form表单元素的值
2、实时监听输入框
@input:输入框内容变化时触发
<div id="app">
<input type="text" v-model="word" @input="wordChanged" />
<p>{{word}}</p>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: "#app",
data: { word: "111" },
methods:{
wordChanged(){
console.log(this.word);
}
}
});
</script>
3、键盘事件监听
@keyup:监听键盘,回车需要添加if判断keyCode==13
@keyup.13:监听回车
<div id="app">
<input type="text" v-model="word" @keyup="doEnter" />
<hr />
<input type="text" v-model="word" @keyup.13="doEnter1" />
<p>{{word}}</p>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: "#app",
data: { word: "111" },
methods: {
doEnter1() {
console.log("回车触发:", this.word);
},
doEnter(e) {
if (e.keyCode == 13) console.log("回车触发:", this.word);
},
},
});
</script>
4、watch监听器
监听data中属性的变化
watch:{要监听的属性名:变化时触发的事件}
<div>
<span>{{count}}</span>
<button @click="changeCount(+1)">+1</button>
<button @click="changeCount(-1)">-1</button>
<br />
<input type="text" v-model="count" />
</div>
<script src="./vendor/vue.js"></script>
<script>
//watch:监听器,监听data中属性的变化{要监听的属性名:变化时触发的事件}
new Vue({
el: "#app",
data: { count: 5 },
methods: {
changeCount(d) {
//字符串转数字:parseInt(字符串) Number(字符串)
//取巧:*1
this.count = this.count * 1 + d;
},
},
watch: {
count () {
console.log("侦测到count发送变更:", this.count);
},
},
});
</script>
5、单选框双向数据绑定
<body>
<!--
lable:此标签会接受点击事件,传递给内部的单选框
name相同的单选框,会被识别为一组
-->
<div id="app">
<span>性别:</span>
<label><input type="radio" value="1" name="sex" v-model="sex" />男</label>
<label><input type="radio" value="0" name="sex" v-model="sex" />女</label>
<br />
<h3>您选择的性别是:{{sex}}</h3>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: "#app",
data: { sex: 0 },
});
</script>
</body>
6、下拉选框双向数据绑定
<body>
<div id="app">
<span>请选择城市:</span>
<select v-model="target">
<option value="./img/1.jpg">重庆</option>
<option value="./img/2.jpg">北京</option>
<option value="./img/3.jpg">上海</option>
</select>
<div>选择的图片:{{target}}</div>
<img :src="target" alt="" />
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: "#app",
data: { target: "./img/1.jpg" },
});
</script>
</body>
7、多选框双向数据绑定
<body>
<div id="app">
<span>选择你喜欢的队伍:</span>
<label> <input type="checkbox" value="JFH" v-model="teams" /><span>JFH</span> </label>
<label> <input type="checkbox" value="GNH" v-model="teams" /><span>gnh</span> </label>
<label> <input type="checkbox" value="GTH" v-model="teams" /><span>GTH</span> </label>
<label> <input type="checkbox" value="JUH" v-model="teams" /><span>JUH</span> </label>
<label> <input type="checkbox" value="YRD" v-model="teams" /><span>YRD</span> </label>
<p>喜欢的队伍有:{{teams.join('、')}}</p>
</div>
<script src="./vendor/vue.js"></script>
<script>
//多选操作:需要数组来存放选项
new Vue({
el: "#app",
data: { teams: [] },
});
</script>
</body>
8、多选框的单独使用
<body>
<div id="app">
<label>
<input type="checkbox" v-model="agree" />
<span>同意软件的用户协议</span>
</label>
<br />
<p>{{agree?"同意":"不同意"}}</p>
<button :disabled="!agree">注册</button>
</div>
<script src="./vendor/vue.js"></script>
<script>
//多选框单独使用,应该绑定Boolean值
new Vue({
el: "#app",
data: { agree: false },
});
</script>
</body>
9、动态样式
动态样式
:style="{属性名:值}" 属性名不允许有-,使用小驼峰/字符串包围
:class="{样式类:true/false}",true生效,false无效
<div id="app">
<button @click="count++">{{count}}</button>
<div :style="{'font-size': count+'px'}">hello world!</div>
<hr>
<!-- count是偶数显示danger样式,奇数显示success样式 -->
<div :class="{danger:count%2==0,success:count%2==1}">下课课。吱吱吱</div>
</div>
<script src="./vendor/vue.js"></script>
<script>
new Vue({
el: "#app",
data: { count: 20 },
});
</script>