JavaScript: 练习 Vue.jsJavaScript: 练习 Vue.jsJavaScript: 练习 Vue.jsJavaScript: 练习 Vue.js
  • 首页
  • 博客
  • 书签
  • 文件
  • 分析
  • 登录

JavaScript: 练习 Vue.js

发表 admin at 2022年7月9日
类别
  • Vue
标签
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id='app'>
    <span>{{message}}</span><br>
    <span v-bind:title="title">鼠标悬停查看</span><br>
    <a v-bind:href="url">链接</a><br>
    <p v-if="istrue1">v-if is True</p>
    <p v-else-if="istrue2">v-else-if is True</p>
    <p v-else>v-if and v-else-if are not True</p>
    <p v-show="isshow">v-show is True</p>
    <button v-on:click="counter += 1">加1 {{counter}} clicked</button>
    <br><br>
    <button v-on:click="add">Add 1</button>
    <p>The button above has been clicked {{counter2}} times!</p>
    <button v-on:click="add2(n)">加 {{n}} 结果:{{counter3}}</button>
    <ol>
        <li v-for="(item,index) in lists">
            {{item.text}}--{{index}}
        </li>
    </ol>
    <br>
    <ol>
        <li v-for="value in object">
            {{value}}
        </li>
    </ol>
    <br>
    <ol>
        <li v-for="item in listObjects">
            {{item.name}}--{{item.age}}--{{item.gender}}
        </li>
    </ol>
    <br>
    <table>
        <tr>
            <td>用户名:</td>
            <td><input type="text" v-model="username"></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" v-model="password1"></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" v-model="password2"></td>
        </tr>
        <tr>
            <td>
                性别:
            </td>
            <td>
                男<input type="radio" name="gender" value="male" v-model="gender">
                女<input type="radio" name="gender" value="female" v-model="gender">
            </td>
        </tr>
        <tr>
            <td>
                爱好:
            </td>
            <td>
                足球<input type="checkbox" name="hobby" value="Soccer" v-model="hobby">
                篮球<input type="checkbox" name="hobby" value="Basketball" v-model="hobby">
                排球<input type="checkbox" name="hobby" value="Volleyball" v-model="hobby">
            </td>
        </tr>
        <tr>
            <td>
                城市:
            </td>
            <td>
                <select name="city" v-model="city">
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="广州">广州</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                简介:
            </td>
            <td>
                <textarea name="desc" v-model="desc"></textarea>
            </td>
        </tr>
    </table>
    <button v-on:click="register">注册</button>
    <ol>
        <li v-for="(value,key) in info">
            {{key}}:{{value}}
        </li>
    </ol>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: "hello world!",
            title: '页面加载于 ' + new Date().toLocaleString(),
            istrue1: false,
            istrue2: false,
            url: 'https://www.baidu.com',
            isshow: true,

            counter: 0,
            counter2: 0,
            n: 2,
            counter3: 0,

            username: '',
            password1: '',
            password2: '',
            gender: '',
            hobby: [],
            city: '',
            desc: '',
            info: '',

            lists: [
                {text: 'item1'},
                {text: 'item2'},
                {text: 'item3'},
            ],
            listObjects: [
                {
                    name: 'Name1',
                    age: 'Age1',
                    gender: 'Gender1',
                },
                {
                    name: 'Name2',
                    age: 'Age2',
                    gender: 'Gender2',
                },
                {
                    name: 'Name3',
                    age: 'Age3',
                    gender: 'Gender3',
                },
            ],
            object: {
                title: 'Title',
                author: 'Author',
                date: 'Date',
            }
        },
        methods: {
            add: function () {
                this.counter2 += 1
            },
            add2: function (num) {
                this.counter3 += num
                alert(this.counter3)
            },
            register: function () {
                this.info = {
                    username: this.username,
                    password1: this.password1,
                    password2: this.password2,
                    gender: this.gender,
                    hobby: this.hobby,
                    city: this.city,
                    desc: this.desc,
                }
            }
        }
    })
</script>
</html>

##########################################################

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="newItem">
    <button v-on:click="addNewItem">添加</button>
    <br>
    <ul>
        <li v-for="(item,index) in items">{{item}} <a href="javascript:;" v-on:click="deleteItem(index)">删除</a></li>
    </ul>
</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            items: [
                'item1',
                'item2',
                'item3',
            ],
            newItem: '',
        },
        methods: {
            addNewItem: function () {
                this.items.push(this.newItem);
                this.newItem = '';
            },
            deleteItem: function (index) {
                this.items.splice(index,1)
            }
        }
    })
</script>
</html>

发表回复 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

类别

  • Cat
  • Python
  • MySQL
  • Django
  • Html/CSS
  • JavaScript
  • Vue
  • RegExp
  • php
  • Practice
  • Virtualization
  • Linux
  • Windows
  • Android
  • NAS
  • Software
  • Hardware
  • Network
  • Router
  • Office
  • WordPress
  • SEO
  • English
  • Games
  • Recipes
  • living
  • Memorandum
  • Essays
  • 未分类

归档

©2015-2023 艾丽卡 Blog support@alaica.com
      ajax-loader