Vue的基础语法2(部分)

最新推荐文章于 2024-10-04 06:11:34 发布

Rabbit_Sir

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量102

点赞数

分类专栏： Vue 文章标签： vue html javascript

本文链接：https://blog.csdn.net/qq_45062721/article/details/104261865

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="salary" />

    <ul>
        <li v-for="(u,i) in users">
            <span v-if = "i % 2 == 0" style="background-color: aqua">
          {{i}} _ {{u.name}} : {{u.gender}} : {{u.age}}
        </span>
            <span v-else = "i % 2 == 1" style="background-color: red">
          {{i}} _ {{u.name}} : {{u.gender}} : {{u.age}}
        </span> |
            <span v-show = "i % 2 == 1" style="background-color: red">
          {{i}} _ {{u.name}} : {{u.gender}} : {{u.age}}
        </span>
        </li>
    </ul>
    {{caculate}}
</div>
<script>
    const vm = new Vue({
        el : "#app",
        data : {
            users:[
                {name: '柳岩', gender:'女', age:'20'},
                {name: '张三', gender:'男', age:'22'},
                {name: '李四', gender:'女', age:'24'},
                {name: '王五', gender:'男', age:'26'}
            ],
            birthday: 12316545643,
        },
        computed : {//计算属性
            caculate(){
                const d=new Date(this.birthday);
                return d.getFullYear()+"年"+d.getMinutes()+"月"+d.getDate()+"日";
            }
        },
        watch : {//监听器
            salary(newVal,oldVal){
                console.log(newVal+":"+oldVal);
            }
        }
    })
</script>
</body>
</html>

v-for
就是和其他语言的for语句一样，用来遍历。
v-if,v-else,v-show
基础的判断语句，但是跟其他语言有所不同的是，v-if(v-else)不满足时，浏览器不会渲染这部分，即就是浏览器中没有不满足条件的语句，但是v-show，不满足时，浏览器会渲染，但是不会显示，后面我们可以通过控制台使其显示。
计算属性
因为我们有时候会在标签里进行计算，或者有的属性需要在标签中计算。所以我们把计算属性写在computed{}中，比如上面的caculate，就是计算属性。
监听器
我们可以监听数据，当数据改变时，我们可以进行操作。
但是要是对对象数据进行监听时，我们要使用深度监听

watch:{//侦听器
           salary(newVal,oldVal){
               console.log(newVal,oldVal);
           },
           person:{
             deep:true,
               handler(p){
                 console.log(p.age);
                 // console.log(p1.age);
                }
           }
        }