我的分享

Appearance

指令 ​

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>

input radio 使用 ​

参考链接

详细用法请参考本站 示例

vue
<div>v-model input radio 使用</div>
<input type="radio" name="radioGroup" value="0" v-model="varRadio" />Radio1
<input type="radio" name="radioGroup" value="1" v-model="varRadio" />Radio2
<div>varRadio变量值：{{ varRadio }}</div>
<hr />
javascript
data() {
    return {
      // input radio 变量
      varRadio: 0,
    }
  },

input checkbox 使用 ​

参考链接

详细用法请参考本站 示例

vue
<div>v-model input checkbox 使用</div>
<input type="checkbox" name="checkboxGroup" value="0" v-model="varCheckbox" />Checkbox1
<input type="checkbox" name="checkboxGroup" value="1" v-model="varCheckbox" />Checkbox2
<div>varCheckbox变量值：{{ varCheckbox }}</div>
<hr />
javascript
data() {
    return {
      // input checkbox 变量
      varCheckbox: [1],
    }
  },

input select 使用 ​

参考链接

详细用法请参考本站 示例

vue
<div>v-model input select 使用</div>
<select name="select" v-model="varSelect" multiple>
  <option value="0">0</option>
  <option value="1">1</option>
</select>
<div>varSelect变量值：{{ varSelect }}</div>
<hr />
javascript
data() {
    return {
      // 支持多选时 select 变量
      varSelect: [1],
      // 单选时 select 变量
      // varSelect: 0,
    }
  },

v-bind ​

v-bind、v-model、v-on

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

Class 与 Style 绑定 ​

官方参考文档

详细用法请参考本站 示例

绑定 HTML class ​

绑定对象 - 内联字面量的形式绑定一个对象以动态切换 class

html
<hr />
<div>绑定 HTML class - 绑定对象 - 内联字面量的形式绑定一个对象以动态切换 class</div>
<div>
    <div :class="{ 'my-font-color': applyMyFontColor }">内容</div>
</div>
javascript
data() {
    return {
        applyMyFontColor: true,
    }
},
css
<style>
.my-font-color {
  color: #42b983;
}

.my-font-bold {
  font-weight: bold;
}

.my-text-underline {
  text-decoration: underline;
}
</style>

绑定对象 - 对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存

html
<hr />
<div>绑定 HTML class - 绑定对象 - 对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存</div>
<div>
    <div class="my-text-underline" :class="{ 'my-font-color': applyMyFontColor, 'my-font-bold': applyMyFontBold }">内容
    </div>
</div>
javascript
data() {
    return {
        applyMyFontColor: true,
        applyMyFontBold: true,
    }
},
css
<style>
.my-font-color {
  color: #42b983;
}

.my-font-bold {
  font-weight: bold;
}

.my-text-underline {
  text-decoration: underline;
}
</style>

绑定对象 - 非内联字面量的形式绑定一个对象以动态切换 class

html
<hr />
<div>绑定 HTML class - 绑定对象 - 非内联字面量的形式绑定一个对象以动态切换 class</div>
<div>
    <div :class="myClass">内容</div>
</div>
javascript
data() {
    return {
        myClass: {
            'my-font-color': true,
            'my-font-bold': false,
        },
    }
},
css
<style>
.my-font-color {
  color: #42b983;
}

.my-font-bold {
  font-weight: bold;
}

.my-text-underline {
  text-decoration: underline;
}
</style>

绑定对象 - 绑定一个计算属性返回的对象

html
<hr />
<div>绑定 HTML class - 绑定对象 - 绑定一个计算属性返回的对象</div>
<div>
    <div :class="myClassComputed">内容</div>
</div>
javascript
data() {
    return {
      applyMyFontColor: true,
      applyMyFontBold: true,
    }
  },
  computed: {
    myClassComputed() {
      return {
        'my-font-color': this.applyMyFontColor,
        'my-font-bold': !this.applyMyFontBold,
      }
    }
  }
css
<style>
.my-font-color {
  color: #42b983;
}

.my-font-bold {
  font-weight: bold;
}

.my-text-underline {
  text-decoration: underline;
}
</style>

绑定数组 - 绑定一个数组来渲染多个 CSS class

html
<hr />
<div>绑定 HTML class - 绑定数组 - 绑定一个数组来渲染多个 CSS class</div>
<div>
    <div :class="['my-font-color', 'my-font-bold']">内容</div>
</div>
css
<style>
.my-font-color {
  color: #42b983;
}

.my-font-bold {
  font-weight: bold;
}

.my-text-underline {
  text-decoration: underline;
}
</style>

绑定数组 - 使用三元表达式在数组中有条件地渲染某个 class

html
<hr />
<div>绑定 HTML class - 绑定数组 - 使用三元表达式在数组中有条件地渲染某个 class</div>
<div>
    <div :class="[this.applyMyFontColor ? 'my-font-color' : '', 'my-font-bold']">内容</div>
</div>
javascript
data() {
    return {
        applyMyFontColor: true,
    }
},
css
<style>
.my-font-color {
  color: #42b983;
}

.my-font-bold {
  font-weight: bold;
}

.my-text-underline {
  text-decoration: underline;
}
</style>

绑定数组 - 数组中嵌套对象有条件地渲染某个 class

html
<hr />
<div>绑定 HTML class - 绑定数组 - 数组中嵌套对象有条件地渲染某个 class</div>
<div>
    <div :class="[{ 'my-font-color': this.applyMyFontColor }, 'my-font-bold']">内容</div>
</div>
javascript
data() {
    return {
        applyMyFontColor: true,
    }
},
javascript

<style>
.my-font-color {
  color: #42b983;
}

.my-font-bold {
  font-weight: bold;
}

.my-text-underline {
  text-decoration: underline;
}
</style>

绑定内嵌样式 ​

绑定对象 - 内联字面量的形式绑定一个对象

html
<hr />
<div>绑定内嵌样式 - 绑定对象 - 内联字面量的形式绑定一个对象</div>
<div>
    <div :style="{ 'font-weight': fontWeight }">内容</div>
</div>
javascript
data() {
    return {
        fontWeight: 'bold',
    }
},

绑定对象 - 非内联字面量的形式绑定一个对象

html
<hr />
<div>绑定内嵌样式 - 绑定对象 - 非内联字面量的形式绑定一个对象</div>
<div>
    <div :style="styleObject">内容</div>
</div>
javascript
data() {
    return {
        styleObject: { 'font-weight': 'bold' },
    }
},

绑定对象 - 绑定对象数组

html
<hr />
<div>绑定内嵌样式 - 绑定对象 - 绑定对象数组</div>
<div>
    <div :style="[styleObject, styleObject2]">内容</div>
</div>
javascript
data() {
    return {
        styleObject: { 'font-weight': 'bold' },
        styleObject2: { 'color': 'red' },
    }
},

三目运算符设置样式字符串

参考链接

html
<hr />
<div>绑定内嵌样式 - 三目运算符设置样式字符串</div>
<div>
    <div :style="this.applyMyFontBold ? 'font-weight:bold;' : ''">内容</div>
</div>
javascript
data() {
    return {
      applyMyFontBold: true,
    }
  },

v-for ​

详细用法请参考本站 示例

参考链接

遍历普通数组 ​

html
<script>
export default {
  data() {
    return {
      datum1: [1, 2, 3, 4, 5],
    }
  }
}
</script>
html
<!-- https://www.jb51.net/article/180823.htm -->
<hr>
<div>
  遍历普通数组
</div>
<div>
  <span style="margin: 5px;border-style: solid;border-width: 1px;" v-for="(item, index) in datum1">{{ index }} - {{
    item }}</span>
</div>

遍历对象数组 ​

javascript
<script>
export default {
  data() {
    return {
      datum2: [{
        text: 'item1',
        children: [
          {
            text: 'item1-1'
          }, {
            text: 'item1-2'
          }
        ]
      }, {
        text: 'item2',
        children: [
          {
            text: 'item2-1'
          }, {
            text: 'item2-2'
          }
        ]
      }],
    }
  }
}
</script>
html
<hr>
<div>
  遍历对象数组
</div>
<div>
  <div style="margin: 5px;border-style: solid;border-width: 1px;" v-for="(item, index) in datum2">{{ index }} - {{
    item.text }}
    <div style="margin: 5px;border-style: solid;border-width: 1px;" v-for="(itemI1, indexI1) in item.children">
      {{ itemI1.text }}
    </div>
  </div>
</div>

遍历对象 ​

javascript
<script>
export default {
  data() {
    return {
      datum3: {
        id: 1,
        name: 'Dexterleslie',
        age: 22
      }
    }
  }
}
</script>
html
<hr>
<div>
  遍历对象
</div>
<div>
  <div style="margin: 5px;border-style: solid;border-width: 1px;" v-for="(val, key, index) in datum3">
    {{ index }} - {{ key }} - {{ val }}
  </div>
</div>

动态 ref 对象 ​

参考链接

javascript
<script>
export default {
  data() {
    return {
      dataList: ['a', 'b', 'c'],
    }
  },
  methods: {
    handleClick(item) {
      this.$refs[`input${item}`][0].focus()
    }
  }
}
</script>
html
<hr>
<div>
  动态 ref 对象
</div>
<div>
  <div v-for="(item, index) in this.dataList">
    <button @click="handleClick(item)">点击我input聚焦</button>
    <input :ref="`input${item}`" />
  </div>
</div>