一.事件对象
Vue 事件 以及获取dom元素(虚拟)
① v-on:事件类型 简写
@事件类型
v-on:click=" " 简写 @click=" "
② v-once 一次性数据绑定
③ changes 执行的方法可以不带括号
④ 写当前组件的所有方法
methods:{ } 注意methods后边是冒号:
<template>
<div id="app">
<button v-on:click="changes">显示隐藏</button>
<div v-show="bool" class="p1"></div>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
bool:true
}
},
//写当前组件的所有方法
methods:{
changes(){
//写简单效果的代码
//修改当前组件data方法里边变量值
//this 指向 VueComponent
//this里边可以拿到属性和方法
console.log(this); //注意this指针
console.log(this.bool);
console.log(this._data.bool);
this.bool=!this.bool;
}
}
}
</script>
<style lang="less">
.p1{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
⑤ 执行的方法有参数, 通过传参将参数传过去
<template>
<div id="app">
<ul>
<li v-for="(item,index) in object" :key="index" v-on:click="changes(index)">
姓名:{
{
item.name}}
性别:{
{
item.sex}}
<span v-for="(show,i) in item.hobby" :key="i">
爱好:{
{
show}},
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
object:[
{
name:"张三",
sex:"男",
hobby:<