v-text
v-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上
v-html
v-html 也是一个渲染内容的指令 但是v-html会解析标签 标签不在页面上显示
v-show
v-show 是一个控制元素显示隐藏的指令 他是通过css样式(display:none)控制dom的显示隐藏
v-if
v-if 也是一个控制元素显示隐藏的指令 但是v-if本质上控制的是 dom的删除和增加 意思就是v-if的值如果是false则会从文档中直接删除dom
v-else-if
v-else-if 也是一个控制元素显示隐藏的指令 但是v-if本质上控制的是 dom的删除和增加 意思就是v-if的值如果是false则会从文档中直接删除dom
v-else 只是一个v-if取反的结果
v-for
v-for 是一个循环指令 如果循环的是数组 则会有两个属性 例如
<div v-for="(item, index) in arr" :key="index"></div>
第一个变量是数组的数组项 第二个是数组的索引值 建议在for循环的dom中绑定key
v-for 如果循环的是一个对象 则会有三个属性 例如
<!-- 第一个变量是对象的值 第二个是键 第三个是对象的下标 -->
<div v-for="(value, key, index) in obj" :key="index"></div>
v-on
v-on 是一个事件绑定的指令 这个指令可以缩写成 @ 这里以点击事件为例
修饰符:
stop - 调用 event.stopPropagation()。
prevent - 调用 event.preventDefault()。