【vue】事件绑定、样式绑定及v-if、v-show、v-for渲染

事件绑定

v-on:click 绑定点击事件 可以简写方式 @click

        <button v-on:click="fn(100)">{{gam}}1</button> <!-- 这里fn(100)属于js语法的函数传参 -->
        <button @click="fn">{{gam}}2</button><!-- 6666 这里没有传参 但vue框架中有一个实参 属于事件对象-->
        <button @click="fn1">{{gam}}3</button>
        <button @click="fn2">{{gam}}4</button>
        <button @click="fn3">{{gam}}5</button>
   <script>
           function fn1() {
            console.log(7777);
        }
        let fn3 = () => {
            console.log(999999);
        }
        new Vue({
            el: "#app",
            data: {
                gam: "点击"
            },
            methods: {
                fn: function (e) {
                    console.log(6666);
                },
                fn1,
                fn2: () => {
                    console.log(11111);
                },
                fn3,
            },

        })
 </script>

嵌套的标签会有冒泡行为，使用 .stop 可以阻止冒泡，阻止从当前元素经过的所有冒泡行为

        <div :class="bo" @click="box">3
            <!-- .self 不会阻止继续冒泡的其他元素 但事件链经过自己不会触发冒泡阶段的事件 -->
            <div :class="bo1" @click.stop.self="box1">2
                <div :class="bo2" @click="box2">1</div>
            </div>
        </div>
         <script>
              new Vue({
            el: "#app",
            data: {
                bo: "box",
                bo1: "box1",
                bo2: "box2",
                gam: "点击"
            },
            methods: {
                box: () => {
                    console.log("最外层");
                },
                box1: function () {
                    console.log("第二层");
                },
                box2() {
                    console.log("第三层");
                },
                waiceng() {
                    console.log("外层");
                },
                neiceng() {
                    console.log("内层");
                }
            },
        })
    </script>

.capture 添加事件侦听器时让事件在捕获阶段触发

         //点击内层都会优先触发外层的内容
        <div :class="bo" @click.capture="waiceng">
            <div :class="bo1" @click="neiceng"></div>
        </div>
          <script>
         new Vue({
            el: "#app",
            data: {
            },
            methods: {
                waiceng() {
                    console.log("外层");
                },
                neiceng() {
                    console.log("内层");
                }
            },
        })
</script>

.prevent 阻止默认事件

    //这里会阻止标签自带的href事件
  <a @click.prevent="fn"  href="https://www.taobao.com/">{{gam}}</a>  <!-- 6666 -->
     <script>
         new Vue({
            el: "#app",
            data: {
             gam: "点击"
            },
            methods: {
              fn: function (e) {
                    console.log(6666);
                },
            },
        })
</script>

.once 事件只触发一次,触发完之后,事件就会解绑

       <button @click.once="fn">{{gam}}一次就解绑</button>
        <div @click.once="fn2">只能点击触发一次</div>
          <script>
         new Vue({
            el: "#app",
            data: {
             gam: "点击"
            },
            methods: {
              fn: function (e) {
                    console.log(6666);
                },
                fn2: () => {
                    console.log(11111);
                },
            },
        })

样式绑定

1.class绑定

class数组写法

一个元素添加多个样式的方法

    <div class=".box">
      //这里把class里面的cls看成了变量
        <div :class="cls"></div>
    </div>
     <script>
            new Vue({
            el:".box",
            data:{
                cls:["yangshi","yangshi1","yangshi2"]
            }
        })
    </script>

方法二：直接在元素里添加样式

 <div class=".box">
        <div :class='["yangshi","yangshi1","yangshi2"]'></div>
    </div>

class对象写法

语法：

对象名:{
    样式1:true/false,
    样式2:true/false
}

实现方法

   <div class=".box">
        <!-- <div :class='cls'></div> -->
        <div :class="obj"></div>
    </div>
        <script>
            new Vue({
            el:".box",
            data:{
                //cls:["yangshi","yangshi1","yangshi2"]
                obj:{
                    yangshi:true,
                    yangshi1:false
                }
            }
        })
    </script>

2.style绑定

style数组写法

  <div id="app" >
        <div :style="[style,style1,style2]">head,yes<div>//数组格式方法一
        <div :style="styleArr">head</div>//数组格式方法二
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                style: {
                    backgroundColor: 'green',  
                    height: '100px'
                },
                style1:{
                    color: 'red'
                    },
                style2:{
                     width: '40px'
                    },
                styleArr:[{
                        color: 'red'
                    },
                    {
                     width: '40px'
                    }]     
                }
        })
    </script>

style对象的写法

对象中的属性必须是css包含有的属性,只需更改成vue认可的命名规则即可

 <div id="app" :style="style">
        head,yes
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                style: {
                    backgroundColor: 'green',
                    color: 'red',
                    width: '40px',
                    height: '100px'
                }
            }
        })
    </script>