Vue样式绑定和事件处理
Vue样式绑定和事件处理
-
- 样式绑定
- 下拉框与复选框
样式绑定
样式绑定我们可以用class 和 style 属性都可以控制元素的显示样式，我们可以使用 v-bind 指令对它们进行绑定，v-bind指令可以用" : "号来进行替代
-
class绑定
使用方式：v-bind:class=“expression”
expression的类型可以是：字符串、数组、对象 -
style绑定
v-bind:style=“expression”
expression的类型可以是：字符串、数组、对象
字体样式的绑定
1.css设置字体的颜色和字体的大小<style type="text/css">
.a {
color: aqua;
}
.b {
color: black;
}
.c {
font-size: 70px;
}
/* div {
padding: 60px;
} */
</style>
vm中进行定义
<script type="text/javascript">
new Vue({
el: '#adp',
data: {
aClz: 'a',
bClz: 'b',
cClz: ['b', 'c'],
}
})
</script>
HTML引用
<div id="adp">
<h2>样式绑定</h2>
<span :class="aClz">哇卡哇卡</span>
<span :class="bClz">玛卡巴卡</span>
<span :class="cClz">梅赛德斯</span>
</div>
事件处理——点击弹出框弹出冒泡
注意在点击内框弹出框出来后，会一直弹出外框，所有可以使用click.stop来进行限制只弹出本框<h2>事件处理-阻止冒泡</h2>
<div style="background-color: #00FFFF;width: 650px;height: 650px;" @click="a">
<div style="background-color: blue;width: 500px;height: 520px;" @click.stop="b">
<div style="background-color: crimson;width: 360px;height: 360px;" @click.stop="c">
<div style="background-color: #000000;width: 200px;height: 200px;" @click.stop="d"></div>
</div>
</div>
</div>
vm中进行定义
<script type="text/javascript">
new Vue({
el: '#adp',
data: {
}，
methods: {
a() {
alert('a事件触发');
},
b() {
alert('b事件触发');
},
c() {
alert('c事件触发');
},
d() {
alert('d事件触发');
},
}
})
</script>
按钮点击发送
<h3>事件处理-按钮只能点击一次</h3>
{
{
info}}<input type="text" v-model="msg" />
<button @click="e">无限点击</button>
<button @click.once="e">一次点击</button>
vm定义
<script type="text/javascript">
//作用将vue实例化挂载到具体的边界,那么这个边界就会被Vue这个渐进式的框架所管理
//注意:边界不能有兄弟标签.边界一定是根标签
new Vue({
el: '#adp',
data: {
msg: '',
info: '',
},
methods: {
e() {
//将msg的值赋到info中
this.info = this.msg;
this.msg = '';
},
}
})
</script>
回车键发送加属性：v-on:keyup.enter="e"
<h3>事件处理-案件修饰符(回车发送)</h3>
{
{
info}}<input type="text" v-model="msg" v-on:keyup.enter="e" />
<button @click="e">无限点击</button>
<button @click.once="e">一次点击</button>
下拉框与复选框
效果：
<div id="adp">
<h3>select标签</h3>
<select v-model="selectdata">
<option v-for="d in data" :value="d.id">{
{
d.name}}</option>
</select>
选中的值：{
{
selectdata}}
//循环遍历数组
<h3>复选框标签</h3>
<div v-for="d in data">
<input type="checkbox" :value="d.id" v-model="selectedidArr" />{
{
d.name}}
</div>
选中的值：{
{
selectedidArr}}
</div>
vm定义
<script type="text/javascript">
new Vue({
el: '#adp',
data: {
msg: '',
info: '',
selectdata:'',
selectedidArr:[],
data: [{
id: 1,
name: '跳棋'
}, {
id: 2,
name: '篮球'
}, {
id: 3,
name: '鼠标'
}, {
id: 4,
name: '充电器'
}],
},
methods: {
a() {
alert('a事件触发');
alert(this.selectdata);
},
e() {
this.info = this.msg;
this.msg = '';
},
},
})
</script>