相關注解

阿新 • • 發佈：2022-05-26

基礎用法

你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向資料繫結。它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理。

警告

v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data 選項中宣告初始值。

v-model

在內部為不同的輸入元素使用不同的 property 並丟擲不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；

checkbox 和 radio 使用 checked property 和 change 事件；

select 欄位將 value 作為 prop 並將 change 作為事件。

警告

對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。

文字

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <input v-model="message" placeholder="編輯我">
        <p>資訊: {{ message }}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                message: '黃子涵'
            }
        })
    </script>
</body>

</html>

多行文字

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文字</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <span>多行資訊:</span>
        <p style="white-space: pre-line;">{{ message }}</p>
        <br>
        <textarea v-model="message" placeholder="新增多行"></textarea>
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                message: '黃子涵'
            }
        })
    </script>
</body>

</html>

警告

在文字區域插值 (<textarea>{{text}}</textarea>) 並不會生效，應用 v-model 來代替。

複選框

單個複選框，繫結到布林值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複選框</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                checked: false
            }
        })
    </script>
</body>

</html>

多個複選框，繫結到同一個陣列：

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複選框</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <input type="checkbox" id="jack" value="黃子涵" v-model="checkedNames">
        <label for="jack">黃子涵</label>
        <input type="checkbox" id="john" value="黃春欽" v-model="checkedNames">
        <label for="john">黃春欽</label>
        <input type="checkbox" id="mike" value="陳蘭英" v-model="checkedNames">
        <label for="mike">陳蘭英</label>
        <br>
        <span>選中的名字: {{ checkedNames }}</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                checkedNames: []
            }
        })
    </script>
</body>

</html>

單選按鈕

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>單選按鈕</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <input type="radio" id="one" value="黃子涵" v-model="picked">
        <label for="one">黃子涵</label>
        <br>
        <input type="radio" id="two" value="黃春欽" v-model="picked">
        <label for="two">黃春欽</label>
        <br>
        <input type="radio" id="three" value="陳蘭英" v-model="picked">
        <label for="three">陳蘭英</label>
        <br>
        <span>已選擇: {{ picked }}</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                picked: []
            }
        })
    </script>
</body>

</html>

選擇框

單選時：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇框</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <div id="example-5">
            <select v-model="selected">
                <option disabled value="">請選擇</option>
                <option>黃子涵</option>
                <option>黃春欽</option>
                <option>陳蘭英</option>
            </select>
            <span>已選擇: {{ selected }}</span>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                selected: []
            }
        })
    </script>
</body>

</html>

警告

如果 v-model 表示式的初始值未能匹配任何選項，<select> 元素將被渲染為“未選中”狀態。在 iOS 中，這會使使用者無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。

多選時 (繫結到一個數組)：

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>

new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇框</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <select v-model="selected" multiple style="width: 70px;">
            <option>黃子涵</option>
            <option>黃春欽</option>
            <option>陳蘭英</option>
          </select>
          <br>
          <span>已選擇: {{ selected }}</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                selected: []
            }
        })
    </script>
</body>

</html>

用 v-for 渲染的動態選項：

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>選擇框</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
                {{ option.text }}
            </option>
        </select>
        <span>已選擇: {{ selected }}</span>
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                selected: 'hzh',
                options: [
                    { text: '黃子涵', value: 'hzh' },
                    { text: '黃春欽', value: 'hcq' },
                    { text: '陳蘭英', value: 'cly' }
                ]
            }
        })
    </script>
</body>

</html>

值繫結

對於單選按鈕，複選框及選擇框的選項，v-model 繫結的值通常是靜態字串 (對於複選框也可以是布林值)：

<!-- 當選中時，`picked` 為字串 "a" -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` 為 true 或 false -->
<input type="checkbox" v-model="toggle">

<!-- 當選中第一個選項時，`selected` 為字串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但是有時我們可能想把值繫結到 Vue 例項的一個動態 property 上，這時可以用 v-bind 實現，並且這個 property 的值可以不是字串。

複選框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 當選中時
vm.toggle === 'yes'
// 當沒有選中時
vm.toggle === 'no'

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>複選框</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <input type="checkbox" v-model="toggle" true-value="yes" false-value="no">
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                toggle: '黃子涵'
            }
        })
    </script>
</body>

</html>

警告

這裡的 true-value 和 false-value attribute 並不會影響輸入控制元件的 value attribute，因為瀏覽器在提交表單時並不會包含未被選中的複選框。如果要確保表單中這兩個值中的一個能夠被提交，(即“yes”或“no”)，請換用單選按鈕。

單選按鈕

<input type="radio" v-model="pick" v-bind:value="a">

// 當選中時
vm.pick === vm.a

點選檢視程式碼

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>單選按鈕</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="hzh">
        <input type="radio" v-model="pick" v-bind:value="a">
    </div>
    <script>
        var vm = new Vue({
            el: '#hzh',
            data: {
                a: '黃子涵'
            },
            methods: {
              pick() {
                  
              }  
            },
        })
    </script>
</body>

</html>

選擇框的選項

<select v-model="selected">
    <!-- 內聯物件字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 當選中時
typeof vm.selected // => 'object'
vm.selected.number // => 123

修飾符

`.lazy`

在預設情況下，v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步 (除了上述輸入法組合文字時)。你可以新增 lazy 修飾符，從而轉為在 change 事件_之後_進行同步：

<!-- 在“change”時而非“input”時更新 -->
<input v-model.lazy="msg">

`.number`

如果想自動將使用者的輸入值轉為數值型別，可以給 v-model 新增 number 修飾符：

<input v-model.number="age" type="number">

這通常很有用，因為即使在 type="number" 時，HTML 輸入元素的值也總會返回字串。如果這個值無法被 parseFloat() 解析，則會返回原始的值。

`.trim`

如果要自動過濾使用者輸入的首尾空白字元，可以給 v-model 新增 trim 修飾符：

<input v-model.trim="msg">

在元件上使用 `v-model`

如果你還不熟悉 Vue 的元件，可以暫且跳過這裡。

HTML 原生的輸入元素型別並不總能滿足需求。幸好，Vue 的元件系統允許你建立具有完全自定義行為且可複用的輸入元件。這些輸入元件甚至可以和 v-model 一起使用！

Spring中Properties相關注解

1、@PropertiesSource註解這是Spring中的註解，用於讀取屬性檔案，預設讀取classpath下的檔案。

3. SpringBoot中相關注解說明

SpringBootApplication 註解作用：用來表示這是一個SpringBoot的入口類，這個註解只能出現一次

關於Spring中@Order 、@AutoConfigureBefore等與順序相關注解的使用誤區

關於Spring中@Order 、@AutoConfigureBefore等與順序相關注解的誤區 1、@Order註解並非一定會給你的bean排序

SSM中的相關注解

@Resource jdk1.8以前自帶，之後就沒了，需要新增javax.annotation-api包只有在*Service/Impl實現類中進行@Service註解，並已經在spring.xml匯入該service包的掃描，才能通過註解查到

Conditional相關注解 assert斷言的使用

技術標籤：雜記java Conditional相關注解 @ConditionalOnClass(KafkaTemplate.class) 就是說只有在classpath下能找到kafkaTemplate類才會構建這個bean。

SpringBoot容器相關注解

1.@Configuration 配置類 User bean類： package com.ttpfx.bean; public class User { private String name;

Spring-02-IOC相關注解

註解驅動什麼是註解驅動註解驅動開發，在Spring工程中使用註解的形式替代XML配置，將繁雜的Spring配置檔案從工程中徹底消除掉，簡化書寫。

springMVC相關注解

@RequestMapping：@RequestMapping(“/path”)表示該控制器處理所有“/path”的UR L請求。RequestMapping是一個用來處理請求地址對映的註解，可用於類或方法上。

@Repository相關注解

@Repository @Repository註解修飾哪個類，則表明這個類具有對物件進行CRUD（增刪改查）的功能，而且@Repository是@Component註解的一個派生品，所以被@Repository註解的類可以自動的被@ComponentScan 通過路徑掃描給

windows num lock 自動關閉相關注冊表項

最近num lock總是自動關閉查詢相關注冊表項 Windows Registry Editor Version 5.00 [HKEY_CURRENT_USER\\Control Panel\\Keyboard]

詳解MySQL資料庫--多表查詢--內連線，外連線，子查詢，相關子查詢

多表查詢使用單個select 語句從多個表格中取出相關的查詢結果,多表連線通常是建立在有相互關係的父子表上;

對Python 中矩陣或者陣列相減的法則詳解

最近在做程式設計練習，發現有些結果的值與答案相差較大，通過分析比較得出結論，大概過程如下：

韓國 5G 為何率先 “點亮未來”？LG U+ 前 CEO 李相哲詳解

2 月 23 日開幕的 2021MWC 上海展，與往年最大的不同是，首次以線上、線下混合模式舉辦，所以有不少無法來中國的海外運營商代表，通過線上採訪，分享了各自 5G 實踐和理解。

《原神攻略》溫迪出裝與隊伍相性搭配詳解溫迪培養一圖流

如果在公測首發版本中沒有抽到溫迪的話，也能在現在的1.4返場中繼續抽，有了溫迪的話，對深淵的幫助是很大的。下面請看由“Asgater”帶來的《原神》溫迪出裝與隊伍相性搭配詳解，一起來看看吧。

雷軍詳解小米 11 Ultra 全相變散熱技術

3月27日訊息今日下午，小米官宣小米 11 Ultra 全球首發全相變散熱技術，該技術可實現一次散熱，固液氣三態變化，但具體如何做到呢？

Win10 21H1 資訊和興趣功能詳解：可自定義關注主題、收藏新聞

5 月 28 日訊息微軟 Win10 21H1 正式版已經推出，帶來了眾多改進和微調。但是，Windows 最明顯的功能更新卻在隨後的 5 月更新 KB5003214中到來，新增工作列的“資訊和興趣”功能。需要注意的是，該功能的官方中文名

《OPUS：龍脈常歌》今夏登陸Steam：太空探索與冒險解謎相結合

由SIGONO INC.開發和發行的《OPUS：龍脈常歌》目前已經上架Steam商城頁面，這是一款結合太空探索與冒險解謎的敘事遊戲，該作預計將於2021年夏季登陸Steam。

【公益免費遊戲《雙相攻略》】一封感謝信：致關注《雙相攻略》的你

2021到2022，疫情依然在反覆不斷地侵擾著我們的生活，災難帶來的痛楚還未平息。這一年發生的一切，讓每個人深感生命之重，希望螢幕前的大家都好。

CSS 選擇器大全解

CSS 選擇器規定了CSS規則會被應用到哪些元素上寫在前面本文使用一個統一的HTML案例，並通過使用不同的選擇器例子來測試究竟哪些元素被添加了樣式（主要是寬度為1px的邊框），對應的HTML程式碼如下，為了方便你

相關注解

基礎用法

警告

警告

文字

多行文字

警告

複選框

單選按鈕

選擇框

警告

值繫結

複選框

警告

單選按鈕

選擇框的選項

修飾符

.lazy

.number

.trim

在元件上使用 v-model

相關推薦

`.lazy`

`.number`

`.trim`

在元件上使用 `v-model`