欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue样式绑定和事件绑定

程序员文章站 2022-06-27 21:33:06
v-bind:class=" " 绑定样式

 

v-bind:class=" "    绑定样式

    <div id="app">
        <!-- 值是对象形式,字段名是class样式名,值是boolean值,true是引用该样式,false不引用 -->
        <!-- 值是false,只是不引用该样式,并不是就不显示该元素了 -->
        <p v-bind:class="{red:true}">p1</p>

        <!-- 可使用其它的值,会自动转换为boolean值 -->
        <p v-bind:class="{red:10}">p2</p>
        <!-- 数字0转换为false -->
        <p v-bind:class="{red:0}">p3</p>

        <!-- 如果是boolean、数值型之外的字符串,需要加引号才会当做字符串处理,如果不加字符串,会当做变量处理 -->
        <!-- 常使用data中的变量作为值 -->
        <p v-bind:class="{red:flag}">p4</p>
        <!-- 没加引号,当做变量处理,没有这个变量,不会报错,是认为值是null,转化为false -->
        <p v-bind:class="{red:f}">p5</p>
        <!-- 加了引号,作为字符串处理,不管是什么字符串(包括空串、'0'),都转化为true -->
        <p v-bind:class="{red:'f'}">p6</p>

        <!-- 如果有多个样式,字段之间逗号分隔即可 -->
        <p v-bind:class="{red:true,big:true}">p7</p>
    </div>

    <script>
        new vue({
            el:'#app',
            data(){
                return{
                    flag:true
                }
            }

        })
    </script>   

 

 

 

 

v-on:事件=" "    绑定事件

  <div id="app">
       <!-- 冒号后面指定事件。只用使用vue对象中自定义的变量、方法,如果使用自带alert()、console.log()这些预置的变量、方法,识别不了 -->
       <!-- 使用vue对象中自定义的变量 -->
       <button v-on:click="count++">count++</button>
        <!-- 使用vue对象中自定义的方法,如果函数有参数,写上参数表 -->
        <button v-on:click="tip1">alert</button>
       <!-- 要绑定多个事件时,不能把值写成数组、对象的形式,要使用多个v-on -->
       <button v-on:mouseover="tip2" v-on:mouseout="tip3">mouse</button>
    </div>

    <script>
        new vue({
            el:'#app',
            data:function(){
                return{
                    count:1,
                }
            },
            methods:{
                tip1(){
                    alert(this.count);
                },
                tip2(){
                    alert("mouser over");
                },
                tip3(){
                    alert("mouse out");
                }
            }
        })
    </script>        

 

 

不管是绑定样式、还是绑定事件,v-bind:class、v-on都需要置于vue对象的管辖范围内才有效,可以放在el指定的元素内,也可以放在template中。