Vue的一堆指令

87 阅读1分钟

(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   
}
``