vue2.0 基本的语法记忆点。
语法 | 简介 |
---|
v-bind | 绑定 DOM 元素属性 |
v-if v-elif v-else | 条件型控制DOM元素显示隐藏 |
v-for | 循环数据来渲染一个DOM列表 |
v-on | 绑定一个监听事件 简写“@” 例如@click |
v-model | 使得在表单输入和应用状态中做双向数据绑定 |
v-show | 控制DOM显示隐藏 |
v-text | 不解析标签解析文本 |
v-html | 解析标签解析文本 |
.stop | 阻止事件冒泡 例如 @click.stop |
.prevent | 阻止事件的默认行为 例如@contextmenu.prevent |
.once | 绑定只执行一次的事件 例如@click.once |
.self | 当且仅当事件是由自身触发时才会触发事件回调函数 例如@click.self |
v-el | 获取DOM对象 js中用$el获取 2.0中已废弃 |
v-ref | 获取组件对象 js中用$ref获取 2.0中已废弃 |
v-pre | 原样输出 |
v-once | 只同步输出一次 |
如何绑定css样式
**如何绑定css样式**
<div id="box">
<div class="c" :class="{red:isred}" ></div>
<div class="c" :class="isred?'red':'blue'"></div>
<div class="c" :class="[{red:'isred'},{blue:'isblue'}]"></div>
<input type="text" v-model="module">
</div>
<script>
new Vue({
el:"#box",
data(){
return{
isred:true,
isblue:true,
module:'12199939'
}
},
})
</script>
如何绑定style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
<script>
new Vue({
el:"#box",
data() {
return{
activeColor: 'red',
fontSize: 30,
styleObject: {
color: 'red',
fontSize: '13px'
}
}
}
})
</script>