Vue 六角学院-学习笔记(指令语法介绍)

在Vue中 {{ }} 可在其中加入``(样板字面值) JS语法 甚至是带入methods

v-for

v-for 也可跑物件、数字 记得加上:key
v-for若须和v-if同时使用时，加入template

      <template v-for="product in products">        <li v-if="product.price <= 110">{{ product }}</li>      </template>

v-bind:

可在html属性上加上逻辑判断
<button type="button" :disabled="DataTruthyToBeDisabled">送出
以下是动态切换标籤的写法

    <button        type="button"        @click="dynamic = dynamic === 'disabled' ? 'readonly': 'disabled'"      >        切换为      </button>      {{dynamic}}      <input type="text" :value="name" :[dynamic] />

checkbox应用

true,false value

      <p>发财了吗?</p>      {{checkAnswer}}      <input        type="checkbox"        v-model="checkAnswer"        id="checkbox1"        true-value="yes"        false-value="no"      />      <label for="checkbox1" >回覆</label>

複选框

{{ checkAnswer3.join(',')}}      <input        type="checkbox"        name=""        id="checkbox3"        value="item1"        v-model="checkAnswer3"      />      <label for="checkbox3">item1</label>      <input        type="checkbox"        name=""        id="checkbox4"        name="item2"        v-model="checkAnswer3"        value="item2"      />      <label for="checkbox4">item2</label>

radio

input 的v-model为同一值

select

      <p>要吃什么?</p>      <p>{{ selectAnswer }}</p>      <select v-model="selectAnswer" multiple>         <!-- 去掉mutiple为单选 -->        <option value="" disabled>选择一项</option>        <option          :value="product.name"          v-for="product in products"          :key="product.id"        >          {{product.name}}        </option>      </select>

作品练习

小作品练习
加上col-4 col-8等切成两边
左侧a标籤加入 class="list-group-item list-group-action"
跟资料绑定的label 跟input 记得改为:for 及 :id
input 可选的部分要加:value 选取后值才能传值给data
position:absolute外层可加入position: relative 限定範围

selectedProduct(product) {
this.temp = { ...product, toppings: [] };
},
複选框toppings记得写在methods中 不然会造成非预期问题
也可在methods中temp写入 ice: "正常冰" 之类的 会成为预设值

不熟悉的部分

参考用限定框

  <div              v-if="!temp.name"              class="position-absolute text-white d-flex align-items-center justify-content-center"              style="                top: 0;                bottom: 0;                left: 0;                right: 0;                background-color: rgba(0, 0, 0, 0.65);                z-index: 100;              "            >              请先选择饮品            </div>