vue学习笔记(3)：v-model，switch语法，eval

msg:"1122323"

flag:"true"

list:[1,2,3,4,5]

user:{

id:1,

name:222,

sex:"男"

}

.thin{

background:red

}

.bor{

font-size:12px

}

.active{

font-weight:bold;

}

1.v-model：

双向数据绑定指令

例子：<input type="text" v-model:value="msg">可以实现表单元素和Model中数据元素的双向绑定

注意：

(1).<input type="text" v-bind:value="msg"> v-bind只能实现单项数据绑定，从M绑定到V，无法实现数据的双向绑定

(2).v-model只能运用在表单元素中

2.switch语法：

  switch(表达式){

    case 值1:

      表达式的值和 值1匹配上了，需要执行的代码;

      break;

    case 值2:

      表达式的值和 值2匹配上了，需要执行的代码;

    break;

    case 值3:

      表达式的值和 值3匹配上了，需要执行的代码;

    break;

    default:

      如果表达式的值和以上的case后面的值都没有匹配上，那么就执行这里的代码。

      break;

  }

注意：

不写break会穿透到下一个break

3.eval：

eval(string)，

string必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。

例子：

(1)eval("x=10;y=20;document.write(x*y)")，

(2)var x=10

document.write(eval(x+17))

(3)document.write(eval(" 's'+2"))

4.类的绑定

例子：

(1)<div :class="['bor','thin']">11111111</div>

(2)<div :class=" [ ' bor ' , ' thin ' , flag ? ' active ' : ' ' ]">

(3)<div :class=" [ ' bor ' , ' thin ' , { ' active ' : flag} ]">(在代码中使用对象来代替三元表达式，提高代码的可读性)

(4)<div :class="{active:true,bor:true,thin:false}">

也可以写作<div :class="classObj">

data(){

return{

classObj:{active:true,bor:true,thin:false}

}

}

5.style的绑定

例子：

(1)<div :style="{color:'red'}">

(2)<div :style="styleObj">

data(){

return(){

styleObj:{color:'red'}

}

}

(3)<div :style="[styleObj1,styleObj2]">

data(){

return(){

styleObj1:{color:'red'},

styleObj1:{font-size:'18px'},

}

}

6.v-for：

循环指令

例子：

(1)<p v-for="(item,i) in list">索引值{{ i }}-------数值{{ item }}</p>

(2)

值{{ value }}-------键{{ key }}

注意：在遍历对象身上键值对的时候除了有值和键，在第三个位置上还有索引

(3)

第{{ count }}次循环

迭代数字

7.v-for循环中key属性的使用

key是唯一标识符，可以避免复选框因为索引问题换行，保证数据的唯一性

例子：

{{ item }}

注意：v-for循环的时候，key属性只能使用number或者string

8.v-if和v-show

例子：<button value="点击" @click="flag=!flag"></button>

特点是每次都会删除或者添加dom元素，有较高的切换性能消耗，如果元素只切换一次，推荐使用v-if

特点是每次都不会添加或者删除dom元素，只是切换了display:none的样式，有较高的初始渲染消耗，元素涉及频繁切换推荐使用v-show

9.form-inline

使form表单中的父元素中的子元素占一行