vue

class于style绑定

v-bind = “可以为对象,也可以为数组”

:class="" class控制样式的展示,动态的class即可通过data数据改变样式 (三元运算:判断是否为真,是否显示)

:style="{color :color }" 第一个color为data属性 ,第二个color为style样式 (三元运算:判断是否为真,是否显示)

条件渲染

v-if:切换过程中,条件块内事件监听器和子组件会被销毁和重建 (低频)
v-show:简单切换css, (高频)

v-if = “a” a是data下变量
v-show = “a” a是data下变量

列表渲染

当v-for更新时,v-for是就地更新,只适用于临时状态和不依赖子组件状态,为了跟踪每个节点的身份,需要提供key,从而可重用和排序for对象

v-for = “item , index in items” :key = “index”
items是数组 index获取的是下标
items是对象 index获取的是属性值

事件绑定
@dblclick:双击事件
@click=“”
在需要使用到原型dom事件 $event 是获取dom的默认属性 :例如 button p div

$(‘body’).bind(‘click’, function (event) {
console.log(typeof event); // object
});

$event使用场景

在表单输入时用到 consolo.log(e.detail.value)//控制台打印输入的内容 e是event
vue

表单输入绑定

v-mode 双向绑定

提交数据
通过按钮@click = “sub”

将获取到的数据,用一个对象或数组,包裹起来并提交
vue