“Vue v-bind 指令”的版本间的差异

来自姬鸿昌的知识库
跳到导航 跳到搜索
第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

设置元素的属性(比如:srctitleclass

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