(1)v-text:更新dom的textContent
<h1 v-text='stu.mes'></h1>
data:{
stu:{
mes:'<strong>hello</strong>'
}
}
//res=<strong>hello</strong> 不会解析代码,原样输出
(2)v-html:更新dom的innerHtml
<h1 v-html='stu.mes'></h1>
//res=hello 解析代码
(3)v-bind:响应式作用于dom
<a :href="src">web开发</a>
src:"http://www.baidu.com"
(4)v-on:绑定事件【@click】 .stop阻止冒泡 .prevent 阻止默认行为
(5)v-model双向数据绑定 监听事件的输入事件以更新数据 (6)v-for:事件循环
<p v-for='(item,index) in list'>{{item}}--{{index}}</p>
key 个人认为是把地址也绑定在元素上了,元素改变,地址改变。 :key为动态绑定
(7)v-if/v-show条件渲染
v-if:为假则销毁
v-show:根据真假切换display的元素
(8)v-once:只渲染一次,以后的视为静态内容直接跳过
好啦,最后说一个样式处理就结束啦!!~~~~~ 简单写两个
.classStyle {
background: #42B983;
color: orangered;
}
.active{
font-size: 50px;
}
<div v-bind:class="className">绑定class</div>
<div v-bind:style='styleValue'>绑定style</div>
<div v-bind:class='{active:isActive}'>动态切换样式</div>
data:{
className:'classStyle',
styleValue:'background:#888888;color:green',
isActive:true
}
``