- <template>
- <div id="helloworld">
- <p>单个复选框:</p>
- <input type="checkbox" id="checkbox" v-model="checked">
- <label for="checkbox">{{ checked }}</label>
- <p>多个复选框:</p>
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
- <label for="runoob">Runoob</label>
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
- <label for="google">Google</label>
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
- <label for="taobao">taobao</label>
- <br>
- <span>选择的值为: {{ checkedNames }}</span>
- <button v-on:click="say('hi')">Say hi</button>
- <button v-on:click="say('what')">Say what</button>
- <button v-on:click="counter += 1">增加 1</button>
- <p>这个按钮被点击了 {{ counter }} 次。</p>
- <br><br>
- <p>input 元素:</p>
- <input v-model="message" placeholder="编辑我……">
- <p>消息是: {{ message }}</p>
- <p>textarea 元素:</p>
- <p style="white-space: pre">{{ message2 }}</p>
- <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
- </div>
- </template>
- <script>
- export default {
- name: 'HelloWorld',
- data () {
- return {
- msg: 'Welcome to Your Vue.js App',
- counter: 0,
- message: 'Runoob',
- message2: '菜鸟教程\r\nhttp://www.runoob.com',
- checked: false,
- checkedNames: []
- }
- },
- methods: {
- say: function (message) {
- alert(message)
- }
- }
- }
- </script>
- <!-- Add "scoped" attribute to limit CSS to this component only -->
- <style scoped>
- h1, h2 {
- font-weight: normal;
- }
- ul {
- list-style-type: none;
- padding: 0;
- }
- li {
- display: inline-block;
- margin: 0 10px;
- }
- a {
- color: #42b983;
- }
- </style>
html:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
- <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
- </head>
- <body>
- <div id="app">
- <p>单个复选框:</p>
- <input type="checkbox" id="checkbox" v-model="checked">
- <label for="checkbox">{{ checked }}</label>
-
- <p>多个复选框:</p>
- <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
- <label for="runoob">Runoob</label>
- <input type="checkbox" id="google" value="Google" v-model="checkedNames">
- <label for="google">Google</label>
- <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
- <label for="taobao">taobao</label>
- <br>
- <span>选择的值为: {{ checkedNames }}</span>
- </div>
- <script>
- new Vue({
- el: '#app',
- data: {
- checked : false,
- checkedNames: []
- }
- })
- </script>
- </body>
- </html>
|