Vue-2

V-on的参数问题

1.普通传参

• 加上字符串代表是字符串·

<button @click='sub("a")'>点击</button>

• 不加字符串代表是变量，需要在实例里面定义

 <button @click='sub(a)'>点击</button>

let b=new Vue({
   
    el:"#box",
    data:{
   
        movie:[1,2,237,88],
        a:456
    },
    methods:{
   
        sub:function(a){
    
            console.log(a);
        }
    }
})

2.如果不传参，不需要额外参数的话。括号可写可不写
如果是双括号内的话函数调用一定要写括号！

<div id="box">{
   {
   qq()}}</div>

<button @click='sub'>点击</button>

<button @click='sub()'>点击</button>

3.如果没有加小括号，但是函数体内部需要参数，name这个参数就是鼠标事件。

<button @click='sub'>点击</button>

methods:{
   
    sub:function(a){
    
        console.log(a);
    }

4.如果有多个变量，其中又需要event事件。
调用的时候event前面+$,后面的不变。

<button @click='sub(123,$event)'>点击</button>

v-on的修饰符

1.阻止冒泡事件

<button @click.stop='sub(123,$event)'>点击</button>

v-if，else,else if

其实代表渲染或者不渲染

<li v-if="isshow">123</li>
<li v-else>12355</li>

当isshow为true时候，就显示123，当false的时候就是12355

如果对于判断条件比较多的，还是写在computed属性下面
不然的话html结构会很乱。

computed:{
   
                message(){
   
                    let qq='';
                    if(this.a<=450){
   
                        qq='123'
                    }else {
   
                        qq=8888;
                    }
                    return qq
                }
            }

切换小案例
思路：通过v-if与点击事件的切换，显示不同的内容

<div id="box">
    <span v-if="isshow">
        <label for="xxx">用户邮箱</label>
        <input type="text" placeholder="请输入邮箱地址" id='xxx'>
    </span>
    <span v-else>
        <label for="xx">用户账号</label>
        <input type="text" placeholder="请输入账号" id='xx'>
    </span>
    <button @click='isshow=!isshow'>切换类型</button>
</div>

<script src="../../vue.js"></script>
<script>
    let app = new Vue({
   
        el:"#box",
        data