VUE学习 ---水果摊见

最新推荐文章于 2024-04-02 19:47:50 发布

Lion Of WU

最新推荐文章于 2024-04-02 19:47:50 发布

阅读量369

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/NDSoumig/article/details/106019779

版权

vue.js 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Hello Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div class="root">
        {{10+20}}
        <p>{{ myname }}</p>
    </div>
    <div>{{10+20}}</div>
</body>
<script>
    var vue = new Vue({
        el: '.root', // vue 渲染开始的地方
        data:{
            myname:'thisxx'
        }
    })    
</script>
</html>

helloVue.html:

在这里插入图片描述

vue模板语法

在new Vue({})的el中选中的节点，就会被vue控制，节点中的{{}}里的文本会被解析成解析式或变量，其中变量放在data:{}中.
v-html可以选中标签
如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div class="root">
        <div v-html='xxx'></div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '.root', // vue 渲染开始的地方
        data:{
            xxx:"<b>xxxxxxx</b>"
        }
    })    
</script>
</html>

v-show来显示div
注：v-show:false 只是给加了个display:none

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div class="root">
        <div v-html='xxx'></div>
        <div v-show='isShow'>动态显示和隐藏</div>
    </div>

</body>
<script>
    var vue = new Vue({
        el: '.root', // vue 渲染开始的地方
        data:{
            xxx:"<b>xxxxxxx</b>",
            isShow:true  //这里不能是大写Ture
        }
    })    
</script>
</html>

v-if对div的操作
注：真的在删除和创建节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="vue.js"></script>
<body>
    <div class="root">
        <div v-html='xxx'></div>
        <div v-show='isShow'>动态显示和隐藏</div>
        <div v-if='isCreated'>动态的创建和删除</div>
    </div>

</body>
<script>
    var vue = new Vue({
        el: '.root', // vue 渲染开始的地方
        data:{
            xxx:"<b>xxxxxxx</b>",
            isShow:true,  //这里不能是大写Ture,
            isCreated:true
        }
    })    
</script>
</html>

动态绑定class
- 三木写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<style>
    .red{
        background-color: red;
    }
    .yellow{
        background-color: yellow;
    }
</style>
<body>
    <div class="box">
        <button @click="handleClick">点击</button>
        <div :class='isActive?"red":"yellow"'>class的三目写法</div>
    </div>
</body>

<script>
    var vm = new Vue({
        el:'.box',
        data:{
            isActive:true
        },
        methods:{
            handleClick(){
                this.isActive = !this.isActive
            }
        }
    })

</script>
</html>

*	对象写法

<div class="box2">
        <div :class='classobj'>对象写法</div>
    </div>

 var vm2 = new Vue({
        el:'.box2',
        data:{
            classobj:{
                red:'red',
                yellow:'yellow',
                blue:'blue'
            },
            
        }

    })

每个属性都会拥有对应的get set方法
在这里插入图片描述
* 数组写法

<div :class='classarr'>数组写法</div>
var vm2 = new Vue({
        el:'.box2',
        data:{
            classarr:['a','b']
        }

    })

在这里插入图片描述
7. 动态绑定样式
三目写法

 <div :style="'background:'+(isActive?'red':'blue')">动态三目写法</div>
var vm2 = new Vue({
        el:'.box2',
        data:{
            isActive:false
        }

    })

对象写法

<div :style="styobj">动态对象写法</div>
var vm2 = new Vue({
        el:'.box2',
        data:{
            styobj:{
                backgroundColor:"yellow"
            }
        }

    })

数组写法

<div :style='styarr'>数组写法</div>
 var vm2 = new Vue({
        el:'.box2',
            styarr:[
                {backgroundColor:"blue"}
            ]
        }

    })

条件渲染 v-if v-else v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<style>
    .red{
        background-color: red;
    }
    .yellow{
        background-color: yellow;
    }
    .blue{
        background-color: blue;
    }
</style>
<body>
    <div class="box">
        <button @click="showclick()">show</button>
        <button v-on:click="handleMyClick()">click</button>
        <div v-if="isCreate === 1">isCreate为1</div>
        <div v-else-if="isCreate === 2">isCreate为2</div>
        <div v-else>iisCreate为3</div>
    </div>
</body> 

<script>
    var vm = new Vue({
        el:'.box',
        data:{
            isCreate:1
        },
        methods: {
            handleMyClick(){
                console.log(this.isCreate)
                if(this.isCreate==1){
                    this.isCreate=2
                }else if(this.isCreate ==2){
                    this.isCreate = 3
                }else{
                    this.isCreate=1
                }
            }
        }
    })
</script>
</html>

v-for遍历数组以及对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<style>
    .red{
        background-color: red;
    }
    .yellow{
        background-color: yellow;
    }
    .blue{
        background-color: blue;
    }
</style>
<body>
    <div class="box">
       <li v-for="(data,index) in datalist">
           {{data}}--{{index}}
       </li>

       <li v-for="(data,index) of datalist">
        {{data}}--{{index}}
        </li>

       <li v-for="(data,key) in mul">
           {{data}}--{{key}}
       </li>
    </div>
</body> 

<script>
    var vm = new Vue({
        el:'.box',
        data:{
            datalist:[
                "1111",
                "2222",
                "3333"
            ],
            mul:{
                name:'liang',
                age:'22',
                school:'xxx'
            }
        },
        methods: {
            
        }
    })
</script>
</html>

注：v-for 有in关键字遍历，有of 关键字遍历，而且要设置key值

对数组的操作

datalist.push(“xxx”) 加入数据
datalist.concat(“xxx”) 重新赋值后才会被检测
通过索引不能对数组进行修改，索引通过set splice进行修改

Lion Of WU

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习 ---水果摊见

Hello Vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><script src="vue.
复制链接

扫一扫