可直接複製到html中檢視效果
lang
="en"
>
>
charset
="utf-8"
>
>
加油卡充值title
>
src=
"">
script
>
src=
"">
script
>
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
head
>
>
*.top
.top p
body
.back
.bechoice
.information
.information span
.information input
.choice
.choice p
.recharge_hurg ul
.recharge_hurg ul li
.recharge_hurg ul li:nth-child(3n)
.recharge_hurg_price
.recharge_hurg_price span
.recharge_btn
.recharge_hurg ul input
::-webkit-input-placeholder
:-moz-placeholder
::-moz-placeholder
:-ms-input-placeholder
style
>
>
"vue"
>
class
="top"
>
>
中石化油卡充值p
>
div>
class
="back"
>
class
="information"
>
>
姓名：span
>
type
="text"
placeholder
="請輸入持卡人姓名"
v-model
="name"
onkeyup
="value=value.replace(/[\d]/g,'
') "
oninput
="if(value.length>30)value=value.substring(0,30)"
>
>
>
type
="number"
placeholder
="請輸入您的號碼"
v-model
="phone"
onkeyup
="this.value=this.value.replace(/\d/g,'
')" oninput
="if(value.length>11)value=value.substring(0,11)"
>
>
卡號：span
>
type
="number"
placeholder
="請輸入卡號"
v-model
="card"
onkeyup
="this.value=this.value.replace(/\d/g,'
')">
div>
class
="choice"
>
>
請選擇充值的金額p
>
div>
class
="recharge_hurg"
>
>
:class
="[index == status ? 'bechoice':'
']" v-for
="(item,index) in list"
:key
="index"
@click
="choiceprice(index,item.price)"
>
}元li
>
>
"otheramount"
type
="number"
placeholder
="其他金額"
@click
="choiceother"
v-model
="question"
onkeyup
="this.value=this.value.replace(/\d/g,'
')" oninput
=" if(value>999999)value=999999;if(value.length>7)value=value.substring(0,7)"
>
li>
class
="recharge_hurg_price"
>
充值金額：
>
}.00span
>
style
="color
: black;
">
元span
>
p>
class
="recharge_btn"
@click
="wxpaly"
>
>
div>
div>
div>
body
>
>
newvue(,
,,,,
,,,]
,}, watch:
//如果question為空時if(
this
.question =="")
else},
// 如果 `name` 發生改變，這個函式就會執行
name:
function
(newname, oldname)},
// 如果 `phone` 發生改變，這個函式就會執行
phone:
function
(newphone, oldphone)
this
.phone =
this
.phone.
replace
(/\d/g,''
) console.
log(1)
},// 如果 `card` 發生改變，這個函式就會執行
card:
function
(newcard, oldcard)},
methods:
,choiceother()
},wxpaly()
else},
input()
},created()
})script
>
>
$(document)
.ready
(function()
);script
>
html
>
Html5標籤頁面
新增加的html5標籤 html5 新增加的html5標籤 定義 article 定義頁面內容之外的內容。定義聲音內容。定義影象。定義命名按鈕 定義數列 tree list 中的資料 定義下拉列表。定義外部互動內容或外掛程式 定義section或page的頁尾。html5 ios中忽略將數字變為 號...
html5基本頁面
html5基本頁面 文件寬度為裝置寬度，初始縮放比例為1 width 設定布局viewport的特定值 device width initial scale 設定頁面的初始縮放 minimum scale 設定頁面的最小縮放 maximum scale 設定頁面的最大縮放 user scaleabl...
HTML5學習之 HTML 5 拖放
拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性，即抓取物件以後拖到另乙個位置。在 html5 中，拖放是標準的一部分，任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...