vue学习01

最新推荐文章于 2024-09-05 18:22:53 发布

小疯子青

最新推荐文章于 2024-09-05 18:22:53 发布

阅读量460

点赞数

分类专栏：笔记文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/a1773570500/article/details/123481763

版权

笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

样例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{firstName}} {{lastName}}</h2>
    <h2>{{getFullName()}}</h2>
    <h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            firstName:'Kobe',
            lastName:'Bryant'
        },
        methods:{
            getFullName:function(){
                return this.firstName +' '+this.lastName
            }
        },
        computed:{
            fullName:function(){
                return this.firstName +' '+this.lastName
            }
        }
    })
</script>
</body>
</html>

样例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
<h2>总价格:{{totalPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books: [
                {id: 110, name: 'hahaha', price: 110},
                {id: 111, name: 'hahaha', price: 110},
                {id: 112, name: 'hahaha', price: 110},
                {id: 113, name: 'hahaha', price: 110}
            ]
        },
        computed: {
            totalPrice: function () {
                let result = 0
                for (let i = 0; i < this.books.length; i++) {
                    result += this.books[i].price
                }
                return result
            }
        }
    })
</script>
</body>
</html>

样例三：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{counter}}</h2>
    <button @click="increment">+</button>
    <button v-on:click="decrement">1</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            counter: 0
        },
        methods: {
            increment() {
                return this.counter++;
            },
            decrement() {
                return this.counter--;
            }
        }
    })
</script>
</body>
</html>

样例4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="increment">按钮1</button>
    <button v-on:click="test2('123')">按钮2</button>
    <button v-on:click="test3('123',$event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        methods:{
            increment(){
                console.log("");
            },
            test2(abc){
                console.log(abc);
            },
            test3(abc,event){
                console.log(abc,event);
            }
        }
    })
</script>
</body>
</html>

样例五

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <div @click="divclick">eee
       <button @click.stop="buttonclick">ddd</button>
   </div>
    <form action="baidu">
        <input type="submit" value="提交" @click.prevent="subimtclick">
    </form>
    <input type="text" @keyup.enter="keyUp">
    <button @click.once="bun2click">按钮2</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        methods:{
            divclick(){
              console.log('divclick')
            },
            buttonclick(){
                console.log('buttonclick')
            },
            subimtclick(){
                console.log('subimtclick')
            },
            keyUp(){
                console.log('keyUp')
            },
            bun2click(){
                console.log('bun2click')
            }
        }
    });
</script>
</body>
</html>

样例六

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else>及格</h2>
    <h2>{{result}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            score:90
        },
        computed:{
            result(){
                let showMessage='';
                if(this.score>90){
                    showMessage='优秀'
                }else if(this.score>=80){
                    showMessage='中'
                }else if(this.score>=60){
                    showMessage='及格'
                }else{
                    showMessage='不及格'
                }
                return showMessage;
            }
        }
    })
</script>
</body>
</html>

样例七

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="userFlag">
        <label for="username">用户账号</label>
        <input type="text" id="username" placeholder="用户账号" key="1">
        <button @click="userFlag=!userFlag">切换成邮箱</button>
    </span>
    <span v-else="userFlag">
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱" key="2">
        <button @click="userFlag=!userFlag">切换成用户</button>
    </span>
 <span>
        <h2 v-show="userFlag">userFlag</h2>
    </span>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            userFlag:true
        }
    })
</script>
</body>
</html>

样例八

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,index) in movies">
            {{index+1}}.{{item}}
        </li>
    </ul>
    <ul>
        <li v-for="(value,key) in info">
            {{value}}.{{key}}
        </li>
    </ul>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            message:'你好啊',
            movies:['星际穿越','大话西游','少年派',"盗墓空间"],
            info:{
                name:'why',
                age:10,
                height:1.80
            }
        }
    })
</script>
</body>
</html>

this.letters.push(‘aaa’);
this.letters.pop();
this.letters.shift();//删除数组中的第一个元素
this.letters.unshift();//在数组最前面添加元素
this.letters.unshift(‘aaa’,‘bbb’,‘ccc’);
this.letters.splice(1)//删除元素
this.letters.splice(1，0，‘x’，‘y’，‘z’)//插入元素

小疯子青

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue学习01

样例一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <h2>{{firstName}} {{lastName}}</h2> <h2>{{getFull
复制链接

扫一扫

专栏目录