vue中动态控制标签属性

最新推荐文章于 2024-05-30 09:00:41 发布

晓明的日常操作

最新推荐文章于 2024-05-30 09:00:41 发布

阅读量5.7k

点赞数

分类专栏： vue 文章标签： vue.js html

本文链接：https://blog.csdn.net/wangming2531/article/details/108863452

版权

vue 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

 <body>
   <div id="app">
        <!--动态控制属性： v-bind:属性='变量' -->
    <img v-bind:src="src" alt="" v-on:mouseenter="change()">
    <div v-bind:class="msg" v-on:mouseenter="c()" v-on:mouseleave="l()"></div>      
   </div>
   <script src="js/vue.js"></script>
    <script>
            new Vue({
                el:'#app',
                data:{
                    src:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/07/09/96/15942612596698.jpg!85.webp',
                    src1:'https://h2a.appsimg.com/a.appsimg.com/upload/flow/2020/08/11/163/15971289413139.jpg!85.webp',
                    msg:'current'
                },
                methods:{
                    change(){
                        this.src=this.src1;
                    },
                    c(){
                        this.msg=''
                    },
                    l(){
                        this.msg='current'
                    }
                }
            })
    </script>
 </body>

v-bind值的不同书写

<body>
   <!-- 
     如果属性是变量
       值只有一个变量 :属性='变量'
       多个变量 :属性='[变量，变量]'
       属性的值有的可以确定，有的不确定
         :属性='{k:v,k:v}'k代表的是属性值 v是true，代表该属性值存在。v是false 代表属性值不存在。v可以是变量，也可以是表达式
         -->
        <div id="app">
            <!-- v-bind:属性 简写为 :属性 -->
            <!-- <p :class="[a,b]">dsfsdfds</p> -->
            <p :class="{one:show,two:1==2}">111</p>
        </div>

        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    a:'one',
                    b:'two',
                    show:true
                }
            })
        </script>
 </body>

晓明的日常操作

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue中动态控制标签属性

<body> <div id="app">  <img v-bind:src="src" alt="" v-on:mouseenter="change()"> <div v-bind:class="msg" v-on:mouseenter="c()" v-on:mouseleave="l()"></div> </d.
复制链接

扫一扫