指令

v-show

详细用法请参考本站示例

v-show 为 true 则显示 DIV

vue

<div v-show="true" style="width:100px;height:100px;background-color: antiquewhite;"></div>

根据变量 showIndex 显示不同的 DIV，实现 DIV 显示切换的效果

vue

<hr/>
<div>通过点击按钮切换显示的 DIV</div>
<div><button @click="showIndex=(showIndex+1)%3">点击我切换显示的 DIV</button></div>
<div v-show="this.showIndex==0" style="width:100px;height:100px;background-color: antiquewhite;">1</div>
<div v-show="this.showIndex==1" style="width:100px;height:100px;background-color: antiquewhite;">2</div>
<div v-show="this.showIndex==2" style="width:100px;height:100px;background-color: antiquewhite;">3</div>

vue

<script>
export default {
  data() {
    return {
      showIndex: 0
    }
  },
}
</script>

v-model

详细用法请参考本站示例
提醒：v-model 有双向绑定变量功能。

定义变量

vue

<script>
export default {
  data() {
    return {
      var1: 1,
    }
  },
  methods: {
    handleClick() {
      alert(this.var1)
    }
  },
}
</script>

使用 v-model 指令绑定变量

vue

使用v-model绑定变量：<input v-model="var1" /><button @click="var1++">+</button>
<br />
<button @click="handleClick">显示变量值</button>

v-bind

v-bind、v-model、v-on

v-bind 是 data 数据对页面标签中属性的绑定，被称为单向绑定。：是指令 v-bind 的缩写，v-bind 指令可以用来绑定标签的属性和样式。

指令 ​

v-show ​

v-model ​

v-bind ​

指令

v-show

v-model

v-bind