当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解VUE中v-bind的基本用法

详解VUE中v-bind的基本用法

2017年12月12日  | 移动技术网IT编程  | 我要评论

惹火逃妻三带一,青羽软剑,致命魔术迅雷下载

这两天学习了v-bind的基本用法，所以，今天添加一点小笔记。

1. v-bind:class（根据需求进行选择）

1.1

 <style>
.box{
  background-color: #ff0;
}
.textcolor{
  color: #000;
}
.textsize{
  font-size: 30px;
}
</style>

<div id="app">
  <span class="box" :class="{'textcolor':iscolor, 'textsize':issize}">我是字</span>
</div>

<script>
　　new vue({
  　　el: "#app",
　　data:{
  　　iscolor:true,
  　　issize:true
　　}
　　})
</script>

1.2

<style>
.box{
  background-color: #ff0;
}
.textcolor{
  color: #000;
}
.textsize{
  font-size: 30px;
}
</style>
<div id="app">
  <span class="box" :class="classobject">我是字</span>
</div>
<script>
new vue({
el: "#app",
data:{
  classobject:{
  'textcolor': true,
  'textsize': true
  }
  }
})
</script>

1.3

<style>
.box{
  background-color: #ff0;
}
.textcolor{
  color: #0f0;
}
.textsize{
  font-size: 30px;
}
</style>
<div id="app">
  <span class="box" :class="[classa,classb]">我是字</span>
</div>
<script>
new vue({
  el: "#app",
  data:{
    classa: 'textcolor',
    classb: 'textsize'
  }
})
</script>

1.4

<style>
.box{
  background-color: #ff0;
}
.textcolor{
  color: #0f0;
}
.textsize{
  font-size: 30px;
}
</style>
<div id="app">
  <span class="box" :class="[isa?classa:'', classb]">我是字</span>
</div>
<script>
new vue({
  el: "#app",
  data:{
    classa: 'textcolor',
    classb: 'textsize',
    isa: false
  }
})
</script>

 2.v-bind:style (根据需求进行选择，驼峰式)

 2.1

<div id="app">
  <span class="box" :style="{color:activecolor, fontsize:size,textshadow:shadow}">我是字</span>
</div>
<script>
  new vue({
    el: "#app",
    data:{
      activecolor: 'red',
      size: '30px',
      shadow: '5px 2px 6px #000'
    }
})
</script>

2.2

<div id="app">
  <span class="box" :style="styleobject">我是字</span>
</div>
<script>
new vue({
  el: "#app",
  data:{
    styleobject:{
    color: 'red',
    fontsize: '30px',
    textshadow: '5px 2px 6px #000'
    }
  }
})
</script>

2.3

<div id="app">
  <span class="box" :style="[stylea,styleb]">我是字</span>
</div>
<script>
new vue({
  el: "#app",
  data:{
    stylea:{
      fontsize: '30px',
      color: 'red'
    },
    styleb:{
      textshadow: '5px 2px 6px #000'
    }
  }
})
</script>

2.4

<div id="app">
  <span class="box" :style="[isa?stylea:'', styleb]">我是字</span>
</div>
<script>
new vue({
  el: "#app",
  data:{
    stylea:{
      fontsize: '30px',
      color: 'red'
    },
    styleb:{
      textshadow: '5px 2px 6px #000'
    },
    isa: false
  }
})
</script>

3.v-bind:src 

<div id="app">
  <img :src="url" />
</div>
<script>
  new vue({
    el: "#app",
    data:{
      url: "../img/pg.png"
    }
})
</script>

4.v-bind:title

<div id="app">
  <div :title="message">我是字</div>
</div>  
<script type="text/javascript">
  new vue({
  el: "#app",
  data:{
    message:"我是吱吱"
  }
  })
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网