veu的常用指令
还得是代码编辑器看的清晰,就不上文字了,岂不美哉O(∩_∩)O哈哈~
<template>
<div class="home">
<h1>vue常用指令</h1>
<!--
v-text 渲染文本,但是不能编译标签语言
v-html 渲染文本,但是可以编译标签语言
v-on 绑定事件 可以简写为@
v-bind 动态绑定属性 可以简写为 :
一下两个都可以控制元素的显示和隐藏
v-show 通过css样式display:none 控制元素的隐藏
v-if 通过dom节点的创建和销毁来控制元素的显示和隐藏
v-once 只渲染一次
v-pre 不编译
v-cloak 防止差值闪烁问题
v-for 循环列表
v-model form表单的双向数据绑定
-->
<h3>v-text 渲染文本,但是不能编译标签语言</h3>
<h5 v-text="'v-text'"></h5>
<h5 v-text="'<span>v-text</span>'"></h5>
<h3>v-html 渲染文本,但是可以编译标签语言</h3>
<h5 v-html="'v-html'"></h5>
<h5 v-html="'<span>v-html</span>'"></h5>
<h3>v-on 绑定事件 可以简写为@</h3>
<h5>{{ num }}</h5>
<h5>{{ num }}</h5>
<button v-on:click="add">num++</button>
<button @click="add">num++</button>
<h3>v-bind 动态绑定属性 可以简写为 :</h3>
<h5 :style="'color:' + (num < 3 ? 'blue' : num < 5 ? 'red' : 'pink')">
属性就是标签本有的,如class,id,name,style
</h5>
<h5
:class="{
bluecolor: num < 3,
redcolor: num >= 3 && num < 5,
pinkcolor: num >= 5,
}"
>
属性就是标签本有的,如class,id,name,style
</h5>
<h3>一下两个都可以控制元素的显示和隐藏</h3>
<h3>v-show 通过css样式display:none 控制元素的隐藏</h3>
<h5 v-show="num >= 3">我爱你呀</h5>
<h3>v-if 通过dom节点的创建和销毁来控制元素的显示和隐藏</h3>
<h5 v-if="num < 3">111</h5>
<h5 v-else-if="num < 5">222</h5>
<h5 v-else>333</h5>
<h3>v-once 只渲染一次,但是数据还是变化的</h3>
<h5>{{ num }}</h5>
<h5 v-once>{{ num }}</h5>
<h3>v-pre 不编译</h3>
<h5>{{ num }}</h5>
<h5 v-pre>{{ num }}</h5>
<h3>v-cloak 防止差值闪烁问题</h3>
<h5 v-cloak>{{ num }}</h5>
<h3>v-for 循环列表</h3>
<h5>遍历数组ele为元素,index为下标</h5>
<ul>
<li v-for="(ele, index) in list">{{ ele }}---{{ index }}</li>
</ul>
<h5>遍历对象ele为属性值,index为属性名</h5>
<ul>
<li v-for="(ele, index) in obj">{{ ele }}---{{ index }}</li>
</ul>
<h5>遍历字符串ele为元素,index为下标</h5>
<ul>
<li v-for="(ele, index) in str">{{ ele }}---{{ index }}</li>
</ul>
<h3>v-model form表单的双向数据绑定</h3>
<input type="text" v-model="num" />
</div>
</template>
<script>
export default {
name: "HomeView",
data() {
return {
num: 0,
list: [1, 2, 3, 4, 5],
obj: { name: "11111", age: 18 },
str: "我爱你",
};
},
methods: {
add() {
this.num++;
},
},
};
</script>
<style lang="scss" scoped>
.bluecolor {
color: blue;
}
.redcolor {
color: red;
}
.pinkcolor {
color: pink;
}
</style>