This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

<a href="{{link}}">baidu</a>
new Vue({
  el:"#app",
  data:{
    link:"http://www.baidu.com"
    }
});     
Copy the code
  • V-bind: Binds HTML tags to vUE instances. Changes in vUE instances affect the values of attributes in corresponding tags
<div id="app">
    <img v-bind:width="width" v-bind:src="imageSrc" v-bind:alt="tip">
</div>      
Copy the code
New Vue ({el: '# app, data: {width: 200, imageSrc: "https://cn.vuejs.org/images/logo.png", tip: "a picture"}});Copy the code
  • Shorthand use: attributes
<a v-bind:href="link">baidu</a>Copy the code
  • Small example: Change the picture
<div id="app"> <img :width="width" :src="imageSrc" @mouseover="change" @mouseout="recover" :class="isClass? 'aa':'bb'" > </div>Copy the code
new Vue({ el:'#app', data:{ width:200, imageSrc:"https://cn.vuejs.org/images/logo.png", isClass:true }, methods:{ change:function(){ this.imageSrc="https://gitee.com/tomlao/typoratuchuang/raw/master/img/iPhone_51075_IMG_0390.JPG" this.isClass=false; }, recover:function(){ this.imageSrc="https://cn.vuejs.org/images/logo.png" this.isClass=true; }}});Copy the code

2. Two-way data binding: V-Model

Function: Bind the value of the HTML tag to the value of the data attribute in the vUE instance