【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 可以阻止冒泡，阻止从当前元素经过的所有冒泡行为