Vue.js 表單_ZenDei技術網路在線

Vue.js 表單

-Advertisement-

用 v-model 指令在表單控制項元素上創建雙向數據綁定 v-model 會根據控制項類型自動選取正確的方法來更新元素輸入框： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title> </head> <styl ...

用 v-model 指令在表單控制項元素上創建雙向數據綁定

v-model 會根據控制項類型自動選取正確的方法來更新元素

輸入框：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <input type="text" v-model="message" placeholder="請輸入。。。">
  <p>{{message}}</p>
</div>

<script>
  new Vue({
    el:'#demo',
    data: {
      message:"這是輸入框"
    },
    methods:{
    }
  });

</script>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <input type="text" v-model="message" placeholder="請輸入。。。">
  <p>{{message}}</p>

  <textarea v-model="message2"></textarea>
  <p style="white-space:pre">{{message2}}</p>
</div>

<script>
  new Vue({
    el:'#demo',
    data: {
      message:"這是輸入框",
      message2:"這是多行文本框"
    },
    methods:{
    }
  });

</script>

覆選框

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <input type="checkbox" v-model="checked">{{checked}}

  <hr>

  <input type="checkbox" v-model="hobby" value="html">html&nbsp;&nbsp;
  <input type="checkbox" v-model="hobby" value="css">css&nbsp;&nbsp;
  <input type="checkbox" v-model="hobby" value="javascript">javascript&nbsp;&nbsp;
  <p>選擇的有：{{hobby}}</p>

</div>

<script>
  new Vue({
    el:'#demo',
    data: {
      checked:true,
      hobby:[]
    }
  });

</script>

單選按鈕

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <input type="radio" name="hobby" id="html" value="html" v-model="checked">
  <label for="html">html</label>

  <input type="radio" name="hobby" id="css" value="css" v-model="checked">
  <label for="css">css</label>

  <input type="radio" name="hobby" id="js" value="js" v-model="checked">
  <label for="js">js</label>

  <hr>
  <p>選擇的是：{{checked}}</p>

</div>

<script>
  new Vue({
    el:'#demo',
    data: {
      checked:"html"
    }
  });

</script>

select下拉列表

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <select name="" id="" v-model="hobby">
    <option value="">請選擇</option>
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="js">js</option>
  </select>

  <hr>
  <p>選擇的是：{{hobby}}</p>

</div>

<script>
  new Vue({
    el:'#demo',
    data: {
      hobby:""
    }
  });

</script>

在預設情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  <select name="" id="" v-model.lazy="hobby">
    <option value="">請選擇</option>
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="js">js</option>
  </select>

  <hr>
  <p>選擇的是：{{hobby}}</p>

</div>

<script>
  new Vue({
    el:'#demo',
    data: {
      hobby:"html"
    }
  });

</script>

如果想自動將用戶的輸入值轉為 Number 類型（如果原值的轉換結果為 NaN 則返回原值），可以添加一個修飾符 number 給 v-model 來處理輸入值：

這個很好用，因為在 type="number" 時 HTML 中輸入的值也總是會返回字元串類型

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

如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
</head>
<style>
  .base{color:#fff}
  .pink{background:pink}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<div id="demo">
  過濾空格：
  <input type="text" v-model.trim="text">
  <p>您輸入了："{{text}}"</p>

  <hr>

  不過濾空格：
  <input type="text" v-model="text2">
  <p>您輸入了："{{text2}}"</p>

</div>

<script>
  new Vue({
    el:'#demo',
    data: {
      text:"初始數據",
      text2:"初始數據"
    }
  });
</script>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

css語法特點和引入頁面三種方式與其優先順序

css層疊樣式表、css樣式由選擇符和聲明組成，而聲明又由屬性和值組成，/*選擇符{屬性:值}選擇符=>選擇器、{屬性:值}=>聲明*/ ，css/*註釋語句*/來標明（html中使用);css樣式代碼插入頁面的形式分為以下3種：內聯式、嵌入式（外聯式）和外部式三種!對於同一個元素我們同時用了三種方... ...
Web_jQuery

楔子需求一：有html標簽關係如下，請找到所有的含有a標簽的li標簽 <div <ul <li class="city" 北京</li <li class="city" <a href="" 上海</a </li <li class="city" 天津</li </ul </div <script ...
Web_javascript-ECMAScript

javascript介紹 Web前端有三層： HTML：從語義的角度，描述頁面結構 CSS：從審美的角度，描述樣式（美化頁面） JavaScript：從交互的角度，描述行為（提升用戶體驗）其中JavaScript基礎又分為三個部分： ECMAScript：JavaScript的語法標準。包括變數、 ...
Web_HTML

web標準介紹 web標準： w3c：萬維網聯盟組織，用來制定web標準的機構（組織） web標準：製作網頁遵循的規範 web標準規範的分類：結構標準、表現標準、行為標準。結構：html。表示：css。行為：Javascript。總結說明：結構標準：相當於人的骨架。html就是用來製作網頁的。 ...
[css背景]背景顏色透明度

rgba與opacity 在第一個例子中，我們只讓背景顏色變得透明，而第二個例子用到opacity屬性，讓整個元素都變得透明，包含元素中含的內容。使用opacity把一個元素設置為透明後，將無法再讓其子元素變得不那麼透明。 body{ background-color: rgba(254,219, ...
element-ui純前端分頁

直接上代碼 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 100%"> <el-table-column type="selection">< ...
虛擬機與用友U8的安裝

1.如何安裝Vbox與U8 安裝包下載：鏈接: https://pan.baidu.com/s/1w8r7kyIJaT8ir dXwEe4tA 提取碼: 1888 裡面有個教程跟著教程一步一步來！！！全部下載雙擊安裝先解壓好之前下載的那個win7 64 001 點擊導入導入之前解壓出來的wi ...
帶你學習Javascript中的函數進階（一）

1. 函數的定義和調用 1.1 函數的定義方式 1. 函數聲明方式function關鍵字（命名函數） 1. 函數表達式（匿名函數） 1. new Function() Function裡面參數都必須是字元串格式第三種方式執行效率低，也不方便書寫，用的比較少所有函數都是Function的實例（對象 ...