一、事件与表单处理
1、v-on 监听事件
<!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>
</head>
<body>
<div id="app">
<p>{{ content }}</p>
<button v-on:click="content='这是新的内容'">按钮1</button>
<button @click="content='这是按钮2设置的内容'">按钮2</button>
<button @click="fn">按钮3</button>
<button @click="fn2(200,$event)">按钮4</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var vm= new Vue({
el:'#app',
data:{
content:'这个默认的内容'},
methods:{
fn(event){
console.log(event);
this.content='这是设置3的内容';
},
fn2(value,event){
console.log(value,event);
}
}
}
)
</script>
</body>
</html>
2、v-双向数据绑定
<!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>Document</title>
</head>
<body>
<div id="app">
<p>p元素的内容是:{{ value }}</p>
<input type="text" v-model="value">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const vm =new Vue({
el:'#app',
data:{
value:''
}
})
</script>
</body>
</html>
3、v-输入框绑定
<!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>Document</title>
</head>
<body>
<div id="app">
<p>textarea输入框内容是:{{ value2 }}</p>
<textarea v-model="value2" ></textarea>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const vm =new Vue({
el:'#app',
data:{
value2:''
}
})
</script>
</body>
</html>
4、单选框绑定
<!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>Document</title>
</head>
<body>
<div id="app">
<p>radio的内容为:{{ value3 }}</p>
<input type="radio" id="one" value="1" v-model="value3">
<label for="one">选项1</label>
<input type="radio" id="two" value="2" v-model="value3">
<label for="two">选项2</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
const vm =new Vue({
el:'#app',
data:{
value3:''
}
})
</script>
</body>
</html>
5、多复选项框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
多复选框：
<br>
<input type="checkbox" id="cb1" value="选项1" v-model="checkedNames">
<label for="cb1">选项1</label>
<br>
<input type="checkbox" id="cb2" value="选项2" v-model="checkedNames">
<label for="cb2">选项2</label>
<br>
<input type="checkbox" id="cb3" value="选项3" v-model="checkedNames">
<label for="cb3">选项3</label>
<br>
<span>选中的值：{{checkedNames}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
checkedNames: []
}
});
</script>
</body>
</html>
6、选择框绑定
<!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>
</head>
<body>
<div id="app">
<!-- 单选选择框 -->
<p>单选选择框内容：{{ value6 }}</p>
<select v-model="value6">
<option value="">请选择</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<!-- 多选选择框 -->
<p>多选选择框内容：{{ value7 }}</p>
<select v-model="value7" multiple>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
value6:'',
value7:[]
}
})
</script>
</body>
</html>