Vue 之 深入理解绑定指令

深入理解绑定指令

v-bind入门

1.<div v-bind:title="message" >点击查看</div>

  data() {
    return {    
      message:'我是一个title',   
    }

渲染显示

** 绑定属性 **

  <img src="http://img0.imgtn.bdimg.com/it/u=1550453621,1699992415&fm=15&gp=0.jpg" >
    <br>
    <!-- 绑定属性 -->
    <img v-bind:src='url'>
    <br>
    <img :src="url"/>

  data() {
    return { 
      url:'http://img0.imgtn.bdimg.com/it/u=1550453621,1699992415&fm=15&gp=0.jpg'
    }

渲染显示

绑定html

 <div v-html="h">

  data() {
    return {
      h:'<h2>我是h2</h2>'
    }

渲染显示

绑定 V-text

 <div v-text="msg"></div>

  data() {
    return {
      msg:"你好VUE",
    }

渲染显示

绑定 v-bind:class

1.
<!-- v-bind:class  :class的使用 -->
  <div v-bind:class="{'red':flag}">我是一个div</div>
  <!-- 可省略v-bind  第二种方法是：取反 -->
  <div :class="{'red':flag,'blue':!flag}">我是另一个div </div>

  data() {
    return {
     flag:false,
    }

.red{
    color: red;
  }
  .blue{
    color:blue;
  }

渲染显示

2.
 <!-- 循环数据  显示不同亮色 -->
  <ul>
    <li>
 <li v-for="(item,key ) in list"  :key="item.id"  :class="{'red':key==0,'blue':key==1}" >
          {{key}}---{{item}}
    </li>
  </ul>

list:['1111','2222','3333'],

渲染显示

v-bing:style :style的使用

 <!-- v-bing:style  :style的使用  绑定样式  动态改变样式-->
 
<div class="box" v-bind:style="{width:boxWdith+'px'}"> 我是一个盒子 </div>

 boxWdith:500,

 .box{
    height: 100px;
    width: 100px;
    background:red;
  }

渲染显示