• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > vue开发 > vue开发教程05:数据绑定及绑定属性指令v-bind

    vue开发教程05:数据绑定及绑定属性指令v-bind

    作者: 分类:vue开发 点击: 78 次
    wordpress CMS主题:ssmay主题

      学习vue框架时,我们会接触到一些新名词,如:数据绑定、指令、路由等等,这些都是vue框架的核心内容。从本章开始,我们将慢慢接触到它们。今天,我们主要介绍数据绑定和v-bind绑定属性指令。

      一:数据绑定。

      vue的数据绑定包括很多种:文本绑定、html数据绑定、属性绑定、事件绑定等等。也就是说,后面的指令绑定也是数据绑定。

      文本绑定案例:

      <template>
      <div>
          {{msg}}
      </div>
      </template>
      <script>
      export default {
      data(){
      return{  //后面的属性声明都在这里声明,不再强调
          msg:'vue视频教程'
      }
      }
      }
      </script>

      这里的文本绑定,先是在data数据里声明了一个msg属性,然后在template模板中直接用大括号  {{msg}}  来实现文本数据绑定。

      二:绑定属性指令v-bind

      vue的属性绑定指令v-bind可以绑定DOM节点的所有属性,如:class、style、src、title等等。

      1:绑定图片属性src

      img_urs:"http://wanlimm.com/images/logo.jpg" //data数据里声明这个属性
      <img v-bind:src="img_url">

      属性绑定指令的v-bind可以省略,如下:

      <img  :src="img_url">

      其它属性绑定同理,如:title

      2:绑定class属性

      class属性有点特殊,因为它会用到CSS样式,所以,要单独介绍一下。绑定class属性,可以根据条件的不同让DOM的class选择不同的值。

      对象语法:

      v-bind:class=”{属性名: 条件判断 }” ,值是一个对象

      下面这句的意思是:如果flag=true时,class=”red”; flag=false时,class=”blue”

      <h1 v-bind:class="{ 'red':flag,'blue':!flag }">
      {{ msg }}
      </h1>

      return{
      flag’:true,
      }

      <style>
      .red{ color:red }
      .blue{ color:blue }
      </style>

      3:绑定属性style

      style属性的值是一个对象,可以直接写CSS样式代码(需用大括号括起来),也可以是一个对象变量。

      <div :style="data">这里直接用一个data变量</div>
      <div :style=”{color: col}">这里用一个对象,正常css写法,需大括号括起来</div>

      return {
      data:{ //这里data是一个css样式对象
      color:'red',
      background:'#ccc'
      },
      col:’blue’
      }

      有关数据绑定及绑定属性指令v-bind就介绍到这里,如果想更加深入,可以进一步去深入学习。谢谢参阅。

       



      QQ二维码

    文章作者:honor
    本文地址:http://wanlimm.com/77201809206943.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.