vue-01

1、

 

 

 

 

 

 2、v-bind 可以简略：

    v-html 

    v-text

---

 

v-bind:class的使用

<div v-bind:class="{'red':flag}">我是div</div>

<div v-bind:class="{'red':flag,'blue':!flag}">我是另一个div</div>

flag:false

<style>
 .red{
   color: red;
 }
  .blue{
    color: blue;
  }
</style>
效果：

---

循环数据第一个变成红色：

1. <ul>
2. <li v-for="(item,key) in list" :class="{'red':key==0,'blue':key==1}" >
3. {{key}}--- {{item}}
4. </li>
5. </ul>

3、绑定样式

<div class="box" v-bind:style="{'width':boxwidth+'px'}"></div>

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

4、双向数据绑定MVVM

 

 

 

 

 

<input type="text" v-model="msg">
<button v-on:click="getMsg">获取表单里的数据</button>
<button v-on:click="setMsg">设置表单里的数据</button>

getMsg(){
       // alert('Vue方法执行了！');
  alert(this.msg);
},setMsg(){
  this.msg="我是改变后的数据"
}

 

 第二种获取元素的方法通过ref

 

 

<input type="text" ref="userinfo">
<br>
<br>
<br>
<div ref="box">我是一个box</div>
<button v-on:click="getInputValue">获取第二个表单里的数据</button>

getInputValue(){
  //获取ref定义的dom节点
  console.log(this.$refs.userinfo)
  this.$refs.box.style.background='red';
  alert(this.$refs.userinfo.value)
}