【Vue】进阶语法

基础-系统指令-v-bind基本用法

  • 作用: 绑定标签上的任何属性
  • 场景: 当标签上的属性是变量/动态/需要改变的
  • 用法:
// ID为数据对象中的变量值 
<p v-bind:id="ID"></p>   
// 简写
<p :id="ID"></p>  

基础-系统指令-v-bind绑定class(对象)

用法: 绑定class对象语法 :class=“{ class名称: 布尔值}”

<p class="obox" :class="{obox:isBn}">内容</p>  // isBn为 data选项中的属性

注意: 绑定class和原生class会进行合并(但是不会合并重复的)

基础-系统指令-v-bind-绑定class(数组)

  • 绑定class数组语法 :class=“[a,b]”
  • a、b为data属性的key
  • data中key对应的value 为class名字
<p :class="[a,b]">内容</p>

data:{
	a:'obox',
	b:'left'
}

基础-系统指令-v-bind-绑定style(对象)

语法:style=“{css属性名:属性值}”

<p :style="{color:a,fontSize:b}"></p> 

//a、b为data属性的key
data: {
a: 'red',
b: '30px'
},

注意 css属性名 例如 font-size要写成 fontSize 以此类推 原有的style会覆盖

基础-系统指令-v-bind-绑定style(数组)

// 语法: 
<div :style="[a,b]"></div>   
// a,b 为data的属性
data: {
     
a: {
     color: "red" },
b: {
     fontSize: "30px" } 
}

注意 对象可以是多个属性的 集合 同样里面的css属性需要遵从小驼峰命名的规则

基础-系统指令-v-model-基础用法

作用: 表单元素的绑定

特点: 双向数据绑定

  • 数据发生变化可以更新到界面
  • 通过界面可以更改数据
  • v-model 绑定表单元素,会忽略所有表单元素的 valuecheckedselected 特性的初始值
  • 表单元素会将 Vue 实例的data中的数据作为数据来源,所以应该在 data选项中声明初始值。
// 表单中设置value值没用 v-model会忽略
<input type="text" v-model="msg"  value="zhang">
<p>{
    {
    msg}}</p>
// 在data中设置msg
data: {
    
	msg: 'zhangsan'
}

基础-系统指令-v-model-原理及实现

分析

  • 表单元素绑定的数据改变 => data数据发生改变=> 页面数据变化
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值