“Vue v-bind 指令”的版本间的差异
跳到导航
跳到搜索
Jihongchang(讨论 | 贡献) |
Jihongchang(讨论 | 贡献) |
||
第3行: | 第3行: | ||
设置元素的属性(比如:<u>src</u>,<u>title</u>,<u>class</u>)<syntaxhighlight lang="html"> | 设置元素的属性(比如:<u>src</u>,<u>title</u>,<u>class</u>)<syntaxhighlight lang="html"> | ||
<div id="app"> | <div id="app"> | ||
+ | <img v-bind:src="imgSrc"> | ||
+ | <img v-bind:title="imgTitle + '!!!'"> | ||
+ | <img class="active"> | ||
+ | <img v-bind:class="isActive?'active':''"> | ||
+ | <img v-bind:class="{active:isActive}"> | ||
+ | |||
+ | <img :src="imgSrc"> | ||
+ | <img :title="imgTitle + '!!!'"> | ||
+ | <img :class="isActive?'active':''"> | ||
+ | <img :class="{active:isActive}"> | ||
</div> | </div> | ||
第8行: | 第18行: | ||
el:"#app", | el:"#app", | ||
data:{ | data:{ | ||
+ | imgSrc:"图片地址", | ||
+ | imgTitle:"hello world", | ||
+ | isActive:false | ||
} | } | ||
}) | }) | ||
</syntaxhighlight> | </syntaxhighlight> |
2023年6月9日 (五) 03:21的版本
https://www.bilibili.com/video/BV12J411m7MG/?p=13
设置元素的属性(比如:src,title,class)
<div id="app">
<img v-bind:src="imgSrc">
<img v-bind:title="imgTitle + '!!!'">
<img class="active">
<img v-bind:class="isActive?'active':''">
<img v-bind:class="{active:isActive}">
<img :src="imgSrc">
<img :title="imgTitle + '!!!'">
<img :class="isActive?'active':''">
<img :class="{active:isActive}">
</div>
var app = new Vue({
el:"#app",
data:{
imgSrc:"图片地址",
imgTitle:"hello world",
isActive:false
}
})