vue中动态控制标签属性
<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()"
·
<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>
更多推荐
已为社区贡献2条内容
所有评论(0)