vuejs入门案例,v-text,v-bind,v-model,v-on,v-if-优快云博客

本文通过一个具体的示例展示了Vue.js的基本用法，包括数据绑定、条件渲染、事件处理等核心特性，并实现了一个简单的计算器功能及列表展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuejs测试</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
<!--v-text 渲染model中的数据，解决网页加载速度慢的时候的闪屏问题-->
<!--v-bind 从ModelView中获取绑定数据，单向的，只能获取-->
<!--v-model 双向绑定mvvm，只能应用于input、select、文本域-->
<!--v-on 获取事件-->
<!--v-if 条件判断-->

<div id="app">
<!--    {{name}}-->
    <span v-text="name"></span>
    <input type="text" v-model="num1"> +
    <input type="text" v-model="num2"> =
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
    <hr>
    <ul>
        <li v-for="(item, index) in listData" :key="item.user.id">
            <div v-if="item.user.id % 2 == 0" :style="{background: color}">
                {{index}} - {{item.user.username}} - {{item.user.age}}
            </div>
            <div v-else>
                {{index}} - {{item.user.username}} - {{item.user.age}}
            </div>
        </li>
    </ul>
</div>
</body>

<script>
    var VM = new Vue({
        el:'#app', // 接管app区域
        data:{
            name: '小宁-程序员',
            num1: 0,
            num2: 0,
            result: 0,
            color: "darkgrey",
            listData: [
                {user:{id:1, username: "刘德华", age: 10}},
                {user:{id:2, username: "周星驰", age: 20}}
            ],
        },
        methods: {
            change: function () {
                this.result = Number.parseInt(this.num1) + Number.parseInt(this.num2);
            }
        }
    });
</script>
</html>