1.创建H5项目
2.引入文件,复制css,把rpx改成px,在html引入css,并且使样式兼容手机端。
<pre class="has">
3.引入 vue.js
<pre class="has">
<script src="https://cdn.jsdelivr.net/npm/vue">
4.在body创建一个div,id='app'; 然后就可以在vue的下方使用vue.js的语法。示例:
<pre class="has">
<!DOCTYPE html>
<body>
<div id="app">
<div class="top_phone">
<input placeholder="手机号" v-model="kongge_phone" maxlength='{{maxlength}}' type='{{input_type}}'></input>
<button style='border: 1rpx solid #19ad19; color:#19ad19' v-on:click='phonenumber'>本机号码</button>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',data: {
maxlength: '13',input_type: 'number',kongge_phone: '139772844113',},methods: {
phonenumber: function() {
console.log('手机号:'+this.kongge_phone)
}
}
})