Vue学习总结2

最新推荐文章于 2024-05-29 12:00:00 发布

java—explore

最新推荐文章于 2024-05-29 12:00:00 发布

阅读量432

点赞数 2

分类专栏：前端 SpringMVC 文章标签： Vue

本文链接：https://blog.csdn.net/weixin_44821177/article/details/98736901

版权

前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

SpringMVC

4 篇文章 0 订阅

订阅专栏

使用v-mode双向数据绑定实现建议计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是计算器</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div class="box">
    <h1>使用v-mode双向数据绑定实现建议计算器</h1>
   <input type="text" v-model="num1" />
    <select v-model="opr">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <label><input type="text" v-model="num2" /></label>
    <button @click="calc()">=</button>
    <label>结果:<span style="color: deeppink" v-text="result"></span>  </label>
</div>
<script type="text/javascript">
   var  vm = new Vue({

    el:".box",
    data:{
        num1:0,
        num2:1,
        opr:'+',
        result:0
    },
    methods:{
        calc(){
            switch (this.opr) {
                case "+":
                    this.result=parseInt(this.num1)+parseInt(this.num2);
                    break;
                case "-":
                    this.result = parseInt(this.num1)-parseInt(this.num2);
                    break;
                case "*":
                    this.result = parseInt(this.num1)*parseInt(this.num2);
                    break;
                case "/":
                    this.result = parseInt(this.num1)/parseInt(this.num2);
                    break;
            }
            this.result = eval("parseInt(this.num1)"+this.opr+"parseInt(this.num2)");
        }

    }

});

</script>
</body>
</html>

效果：

在这里插入图片描述

使用Vue给元素绑定样式属性

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>使用Vue给元素绑定样式属性</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
    <style type="text/css">
        .color{
            color: deeppink;
        }
        .fontSize{
            font-size: 30px;
        }
        .space{
            letter-spacing: 0.5em;
        }
        .style{
            font-style: italic;
        }
        .active{
            background-color: yellow;
        }
    </style>
</head>
<body>

<div id="app">
    <h1 v-bind:style="{color:'red','font-size':'20px'}">·不一样的我想你·</h1>
    <h1 v-bind:style="innerStyle01">·不一样的我想你·</h1>
    <h1 v-bind:style="[innerStyle01,innerStyle02]">·不一样的我想你·</h1>

    <hr/>
    <h1 :class="'color'">·不一样的我想你·</h1>
    <h1 :class='"color"'>·不一样的我想你·</h1>
    <h1 :class="['color','fontSize']">·不一样的我想你·</h1>
    <h1 :class="['color','fontSize',false?'active':'']">·不一样的我想你·</h1>
    <h1 :class="['color','fontSize',5>3?'active':'']">·不一样的我想你·</h1>
    <h1 :class="['color','fontSize',flag===false?'active':'']">·不一样的我想你·</h1>
    <h1 :class="['color','fontSize',{active:false}]">·不一样的我想你·</h1>
    <h1 :class="{color:true,fontSize:false,space:true,style:true,active:false}">·不一样的我想你·</h1>
    <h1 :class="[classInBox01,classInBox02]">·不一样的我想你·</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            innerStyle01:{color:'red','font-size':'20px'},
            innerStyle02:{"letter-spacing":"1em"},
            flag:true,
            classInBox01:{color:true,fontSize:false},
            classInBox02:{space:true,style:true,active:false}
        }
    });
</script>
</body>
</html>

运行结果：
在这里插入图片描述

v-for指令

1.使用v-for指令遍历简单数组

2.使用v-for指令遍历对象数组

id：{{user.id}}—name：{{user.name}}

3.使用v-for指令遍历对象属性值

4.使用v-for指令遍历数字（作用就是标准的for循环次数遍历）

【注意】
1.遍历得到的值可以使用【插值表达式、v-text、v-html】显示
2.不管遍历何种数据类型，都可以得到值和索引
3.遍历对象属性和值时可以得到【值、属性名字、索引】
4.值的赋值顺序是：值、【键名】、索引
5.一次遍历中，多个结果之间使用,分割即可对应赋值（value,key,index）
6.遍历过程中接受值的变量名字可以任意
7.遍历数字时数字是从1开始，不能是负数（因为该功能是固定次数遍历）
8.在组件中使用数据时，一定要用key唯一绑定数据（保证对UI组件的操作不会因为其它组件的变化而发生变化）
注意：
1.key必须是基本数据类型（string/number）
报错：Avoid using non-primitive value as key, use string/number value instead.
2.key的数据值一定不要重复
报错：Duplicate keys detected: ‘3’. This may cause an update error.
技巧：一般使用对象中的值唯一属性（主键）作为key，比如id
语法：

{{user.id}}—{{user.name}}

【知识点】
1.如果组件的属性的值是一个变量，则必须使用v-bind:或者:进行属性值的绑定
2.数组的push()方法用于向数组末尾加入元素，数组的unshift()方法用于向数组最前面加入元素
this.users.push({id:this.id,name:this.name,age:this.age});
this.users.unshift({id:this.id,name:this.name,age:this.age});
3.在遍历对象数组并结合组件（表单元素）一起使用时，一定要指定唯一的key属性，进行组件和数据
的唯一关联，避免被其它操作（指非本元素）影响

 <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue中的for指令</title>
        <script src="../lib/vue.js" type="text/javascript"></script>
    </head>
    <body>
    
    <div id="app">
        <h1>Vue中的for指令</h1>
        <p v-for="name in names">{{name}}</p>
        <hr/>
        <p v-for="name,index in names" v-text="name+'---'+index"></p>
        <hr/>
        <p v-for="user in users" v-text="user"></p>
        <hr/>
        <p v-for="user in users">id：{{user.id}}---name：{{user.name}}---age：{{user.age}}</p>
        <hr/>
    
        <p v-for="num in 12" v-text="num"></p>
        <hr/>
        <p v-for="num,index in 12" v-text="num+'---'+index"></p>
    
        <h1>Vue中的for指令实现数据绑定</h1>
        <label>id：<input type="text" v-model="id"/></label>
        <label>name：<input type="text" v-model="name"/></label>
        <label>age：<input type="text" v-model="age"/></label>
        <label><button @click="add()">添加人员信息</button></label>
        <p v-for="user in users" :key="user.id">
            <label><input type="checkbox"/>{{user.id}}---{{user.name}}---{{user.age}}</label>
        </p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                names:["006","007","008","009","010","011","012","013","014"],
                users:[
                    {id:1,name:"吾",age:32},
                    {id:2,name:"名",age:33},
                    {id:3,name:"超",age:35}
                ],
    
                id:'',
                name:'',
                age:''
            },
            methods:{
                add(){
                    //this.users.push({id:this.id,name:this.name,age:this.age});
                    this.users.unshift({id:this.id,name:this.name,age:this.age});
                }
            }
        });
    </script>
    </body>
    </html>

结果：
在这里插入图片描述

java—explore

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue学习总结2

使用v-mode双向数据绑定实现建议计算器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>我是计算器</title> <script src="../lib/vue.js" type="text/java...
复制链接

扫一扫

专栏目录