主要复习了一些vue相关事件处理，还有数据双向绑定（多选框，复选框等）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<div id="app">
<!-- 事件处理 -->
<div class="count" style="border: 1px solid red; margin: 20px;padding: 20px;">
通过按钮控制，写出一个简易的计数器
count: {{count}}
<button v-on:click="add">+1</button>
<!-- <button v-on:click="count++">+1</button> 可以直接卸载内部（如果代码量少的话）-->
<!-- <button @click="add">+1</button>这个是缩写形式 -->
<button @click="subtraction">-1</button>
<!--加入参数-->
<button @click="addnum(2)">+2</button>
<button @click="addnum(4)">+4</button>
<br>
<!-- 事件修饰符 -->
vue提供的时间修饰符：
<li>.stop</li>
<li>.prevent</li>
<li>.capture</li>
<li>.self</li>
<li>.once</li>
<li>.passive</li>
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 案件修饰符 -->
<input type="text" @keyup.enter="console.log(inputVal)" v-model="inputVal" placeholder="按回车得到输入的内容">
Vue 提供了绝大多数常用的按键码的别名：
<li>.enter</li>
<li>.tab</li>
<li>.delete (捕获“删除”和“退格”键)</li>
<li>.esc</li>
<li>.space</li>
<li>.up</li>
<li>.down</li>
<li>.left</li>
<li>.right</li>
</div>
<!-- v-model绑定选框 -->
<div style="border: 1px solid red; margin: 20px;padding: 20px;">
单个复选框绑定布尔值：
<input type="checkbox" id="ckb" v-model="ckbVal">
<label for="ckb"> {{ckbVal}} </label><br>
绑定到data中的值是false或true <br><br><br>
多个复选框绑定到同一个数组: <br>
<input type="checkbox" id="坤坤" v-model="ckbStr" value="坤坤"><label for="坤坤">坤坤</label>
<input type="checkbox" id="王坚" v-model="ckbStr" value="王坚"><label for="王坚">王坚</label>
<input type="checkbox" id="飞飞" v-model="ckbStr" value="飞飞"><label for="飞飞">飞飞</label><br>
选中的值为：{{ckbStr}} <br>
需要给input绑定value值，并将model绑定到数组
<br><br><br>
单选按钮
<input type="radio" id="one" value="one" v-model="radioVal"><label for="one">one</label>
<input type="radio" id="two" value="two" v-model="radioVal"><label for="two">two</label>
<br> 选中的值为 {{radioVal}} <br>
需要将 radio的value绑定到同一个data数据上
<br><br><br>
下拉选择框(select): <br>
<select v-model="selectVal">
<option value="" disabled>请选择</option>
<option value="坤坤">坤坤</option>
<option value="飞飞">飞飞</option>
<option value="王坚">王坚</option>
</select>
选中的内容是: {{selectVal}}
<br><br>
多选框(select): <br>
<select v-model="selectMVal" multiple>
<option value="" disabled>请选择</option>
<option value="坤坤">坤坤</option>
<option value="飞飞">飞飞</option>
<option value="王坚">王坚</option>
</select>
选中的内容是: {{selectMVal}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var app = new Vue({
el: '#app',
methods: {
add: function () {
this.count++
},
subtraction: function () {
this.count--
},
addnum(num) {
this.count += num
},
doThis() {
conosole.log('aaaaa')
}
},
data: {
count: 0,
inputVal: '',
ckbVal: false,
ckbStr: [],
radioVal: '',
selectVal: "",
selectMVal: []
},
})
</script>
</body>
</html>
392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
