“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
  }
})