Maison >interface Web >tutoriel HTML >Vue.JS入门篇处理表单_html/css_WEB-ITnose

Vue.JS入门篇处理表单_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-21 09:00:261473parcourir

基本用法

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><form id="demo">    <!-- text -->    <p>        <input type="text" v-model="msg">        {{msg}}    </p>    <!-- checkbox -->    <p>        <input type="checkbox" v-model="checked">        {{checked ? "yes" : "no"}}    </p>    <!-- radio buttons -->    <p>        <input type="radio" name="picked" value="one" v-model="picked">        <input type="radio" name="picked" value="two" v-model="picked">        {{picked}}    </p>    <!-- select -->    <p>        <select v-model="selected">            <option>one</option>            <option>two</option>        </select>        {{selected}}    </p>    <!-- multiple select -->    <p>        <select v-model="multiSelect" multiple>            <option>one</option>            <option>two</option>            <option>three</option>        </select>        {{multiSelect}}    </p>    <p><pre class="brush:php;toolbar:false">data: {{$data | json 2}}
<script> new Vue({ el: '#demo', data: { msg : 'hi!', checked : true, picked : 'one', selected : 'two', multiSelect: ['one', 'three'] } });</script>
Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn