vue指令

常用指令

v-text和v-html

用于页面渲染

v-bind

v-bind后面是 ：属性名=[变量名]。例如:v-bind:title="message"

例如：

    <div>
      <a v-bind:href="href">慕课网</a>
    </div>
    <div>
      <img v-bind:src="src"/>
    </div>
    <div>
      <button v-bind:disabled="disabled">禁用按钮</button>
    </div>

   data: { 
       title: "您好 ！", 
       href: 'https://www.baidu.com/', 
       src: './1.png', 
       disabled: true 
   }

 

v-for

循环可以是数组或者对象

v-if和v-show

 <button id="show" v-show="deleteButton">我是删除按钮，我通过v-show控制显隐</button>
 <button v-on:click="deleteButton = true">设置显示</button>
 <button v-on:click="deleteButton = false">设置隐藏</button>

<button id="if" v-if="editButton">我是修改按钮，我通过v-if控制显隐</button> 
<button v-on:click="editButton = true">设置显示</button> 
<button v-on:click="editButton = false">设置隐藏</button>

data() { return { deleteButton: true, editButton: true } }

v-if：根据表达式的值在 DOM 中生成或移除一个元素。

v-show：根据表达式的值通过样式的改变来显示或者隐藏 HTML 元素。

v-if、v-else-if、v-else

   <div v-if="number === 1">
      A
    </div>
    <div v-else-if="number === 2">
      B
    </div>
    <div v-else>
     C
    </div>

 

v-on

v-model

 

v-pre

 v-once