vue常用的指令

今天利用空闲时间为大家分享一下常用的vue指令。

1. v-model：表单控件元素上创建双向数据绑定
   
   通过改变input的值可以vue实例的值，进而改变视图的值，相反，改变实例的值同样可以改变输入框的值
   代码示例：
   效果图:(输入框输入111222，后面会跟着添加111222)
   

2. v-text：更新标签的文本内容(和“{{}}”的用法等效)
   代码示例：(v-text和{{}}的显示效果一致)
   

   *效果展示：*
   

   

3. v-html：将html代码以标签的形式展示在试图上(不用v-htm就会以字符串的形式渲染在页面上)
   代码示例：

效果展示：(从浏览器页面和控制台可以看到，第一个渲染成了h3标签，而第二个是字符串)
4. v-if/v-show：
同：根据条件渲染，值为true则渲染，为false则不渲染
异：前者是通过销毁或创建来渲染页面，后者是通过display:none来进行隐现的(若频繁切换隐现可以优先使用v-show,若v-if和v-for一同使用，后 者优先级高)
代码示例：

效果展示：(v-if不会生成标签，而v-show显示表示，只是display的属性为
none)

5. v-else：和v-if搭配使用，若v-if的值为false时是会显示v-else的内容
代码示例：

效果展示：显示的为v-else内容

6. v-for：通过遍历data中的数据实现列表渲染，可以迭代数组,对象,整数。
若项较多可以再加上 :key=””
代码示例:item为数组的每一项，index为每一项的下标

效果展示：

7. v-bind: 动态绑定DOM元素属性(可以简写为“:”)
例如img标签中src属性前不加v-bind符合就会显示等号后面写死的值，若加上则可以调用到data中的值

8. v-on：绑定事件的监听器，可以缩写为“@”(用在普通元素上时，只能监听原生 DOM 事件。 用在自定义元素组件上时，也可以监听子组件触发的自定义事件)
代码如下：

效果展示：
9. v-once：数据只会渲染一次，无论数据如何变化都不会在渲染
代码示例：

效果展示：双向绑定后，无论输入框的值如何改变，p标签的内容都不会在渲染

逆战班哦