v-model v-bind

v-model 在表单控件或组件上创建双向绑定

<!--input的value值被msg的值替换,value值改变,p标签中的内容也改变-->
<input type="text" v-model="msg">
<p>{{msg}}</p>

<!--通过选项会改变name的值,改变name的值,也会改变选项-->
<select v-model="name">
	<option>张三</option>
	<option>李四</option>
	<option>王二</option>
</select>

<!--文本域默认内容会是msg的值,改变文本域的内容,msg也会改变-->
<textarea v-model="msg"></textarea>
<p>{{msg}}</p>

<!--pet和value相同的选项,默认会被打钩,pet的值改变,对应value值的单选框会被选中,选中单选框,pet的值也会改变成对应的value值-->
<input type="radio" v-model="pet" value="狗">
<input type="radio" v-model="pet" value="猫">

<!--通过改变dog的值为真假,选中复选框-->
苹果<input type="checkbox" v-model="dog">

<!--多个复选框通过设置dog:[],点击复选框的时候,把复选框的value值添加给dog-->
苹果<input type="checkbox" v-model="dog" value="狗">
橘子<input type="checkbox" v-model="dog" value="狗蛋">

v-model的修饰符

<input type="text" v-model.trim="msg"><!--会过滤掉msg首尾的空格-->
<input type="text" v-model.number="msg"><!--将字符串类型的数字,转换成数字类型-->
<!--可以组合使用,直接点在后面-->
<input type="text" v-model.number.trim="msg">
<input type="text" v-model.lazy="msg"><!--失去焦点的时候触发v-model,默认msg值改变数据就会同步改变,添加lazy之后,将这个同步推迟到失去焦点之后-->

v-bind 用于设置元素的attribute

<p v-bind:name="name"></p><!--:属性名="属性值"-->
<p :name="name"></p><!--简写-->
<p :class="{blue:ifBlue}"></p><!--写成对象,通过ifBlue的值是否为true,来决定添不添加类名,这里的blue只是单纯的字符串 :后面的条件可以是变量-->
<p class="vv" :class="name"></p><!--v-bind中的class属性跟普通class属性可以共存-->
<p :class="{cc:true,vv:true}"></p><!--添加多个类名,必须要有:条件-->
<p :class="classObj"></p><!--可以把data中的对象传给v-bind-->
<p :class="['aa',classObj.bb]"></p><!--通过数组添加多个类名,可以写字符串 也可以变量 对象-->
<p :class="['aa',{bb:false}]"></p><!--也可以写判断-->

<p :style="{backgroundColor:'red',color:'#fff','font-size':'55px'}"></p><!--属性名不用驼峰命名,必须要加引号,多个用逗号隔开-->
<p :style="styleData"></p><!--一般写成对象,挂在Vue实例中然后直接添加对象-->
<p :style="[styleData,styleData1]"></p><!--可以用数组的形式,添加多个对象,如果有重复的,后面的权限比前面高-->
<!--花括号里属性用不了变量-->