Vue.js基础学习(三) -------------动态绑定v-bind的介绍和使用

Vue.js基础学习(三) -------------动态绑定v-bind的介绍和使用

一、v-bind介绍

v-bind:需要动态决定标签的属性的时候 可以使用到v-bind
语法糖的写法: : ,把v-bind替换为

二、v-bind的基本使用

动态绑定a标签的href属性,动态绑定img的src属性

    <img :src='imgURL'  >
    <a :href="aHref">百度一下</a>
     aHref:'http://www.baidu.com',
     imgURL:'/img/=.jpg'

三、v-bind动态绑定class

  <style>
    .Color{
      
      color:green;
    }
    .acl{
      
      color:red;
    }
  style>
head>
<body>
  <div id="app">
     
    <h2 :class="{ Color:isColor,  Line:isLine}">{
    {message}}h2> 
    <h2 :class="getcolores()">{
    {message}}h2>
    <button @click='color'>更换button>
  div>
  <script src="/vue.js">script>
  <script>
    const app = new Vue({
      
      el:'#app',
      data:{
      
        message:'动态绑定class',
        isColor:true,
        isLine:true
      },
      methods: {
      
        color:function(){
      
          this.isColor =! this.isColor;
        },
        getcolores:function(){
      
          return{
      Color: this.isColor}
        }
      }
    })
  script>
body>

在绑定class的时候在类后面赋值一个Boolean值,这样可以决定它是否显示这个class属性

四、v-bind动态绑定style

body>
  <div id="app">
    <h3 :style="{
        fontSize:fonzise,color:Fcolor}">{
    {message}}h3>
    <h3 :style="[fz,Fcolor]" >{
    {message}}h3>
  div>
  <script src="/vue.js">script>
  <script>
    const app = new Vue({
      
      el:"#app",
      data:{
      
        message:'动态绑定style',
        fonzise:'100px',
        Fcolor:'red',
      },
    })
  script>
body>

在v-bind里绑定一个元素的style属性的时候,给style赋值一个对象,对象的名字是属性名,值是在vue实例的data里定义的,以方便动态的改变它的值

你可能感兴趣的:(vue.js学习,vue)