vue基础语法:插值,绑定属性：（v-bind）

二、vue基础语法：

1、插值（即 {{ }} ）：让内容动态显示

例如：span>Message: {{ msg }}span>

指令：v-once:执行一次性的插值，内容不会随着更新

<span v-once>{{ msg }}</span>//这个msg内容将不会动态改变

v-text:渲染文本，会覆盖标签的所有内容

v-pre：展示标签内容，不会进行解析

例如：<span v-pre>{{msg}} </span>//结果显示为：{{msg}}

2、绑定属性：（v-bind）

v-bind：用户绑定一个或者多个属性值，或者在组件间传值，简写为冒号（：）

（1）图片路径src和网址连接href的绑定

例如：<img :src="Url" /> <a :href="Href">点击</a>

（2）类名class绑定

例如：<div v-bind:class="{ active: isActive }"></div>
data: {
  isActive: true
}

上面active类名是否有效，取决于isActive是否为true

如果类名有多个，中间用逗号隔开，例如

<div class="static" v-bind:class="{ active: isActive, bg: isShow }"></div>
data: {
  isActive: true,
  isShow:false
}
结果为：<div class="static active"></div>，只有active类名有效，bg类名不会显示

还可以用obj方式：例如

<div v-bind:class="classObj"></div>
data: {
  classObj: {
    active: true,
    isShow:false
  }
}

或者使用返回对象的计算属性，例如

<div v-bind:class="classObject"></div>
data: {
  isActive: true,
  isShow:false
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.isShow,
      bg: this.isShow
    }
  }
}

或者使用返回对象的方法，例如

<div v-bind:class="IsShow()"></div>
data: {
  isActive: true,
  isShow:false
},
methods: {
  IsShow() {
    return {
      active: this.isActive && !this.isShow,
      bg: this.isShow
    }
  }
}

或者使用数组的方法，例如

<div v-bind:class="[activeClass, bgClass]"></div>
data: {
  activeClass: 'active',
  bgClass: 'bg'
}
结果为：<div class="active bg"></div>

或者三元表达式，例如

<div v-bind:class="[isActive?activeClass:'', bgClass]"></div>
data: {
  isActive: true,
  activeClass: 'active',
  bgClass: 'bg'
}
结果为：<div class="active bg"></div>

（2）内联样式style绑定

v-bind:style=""，例如

<div v-bind:style="{ color: color, fontSize: fontSize + 'px' }"></div> 
data: {
  color: '#000',
  fontSize: 20
}
或者写成obj
<div v-bind:style="style"></div> 
data: {
  style:{
      color: '#000',
      fontSize: '20px'  
  }
}

也可以使用对象的计算属性和方法，或者数组形式来使用