Vue基础学习二

最新推荐文章于 2024-07-13 15:10:20 发布

太阳的后裔

最新推荐文章于 2024-07-13 15:10:20 发布

阅读量425

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43942765/article/details/121502575

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是双向绑定？

看了视频资料，我对此的总结就是改变视图的值，vm的值也随之改变；改变vm的值，视图的值也能随之改变，这就是双向绑定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="text" :value="msg">
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World"
        }
    })
</script>

运行后我们改变v-bind中的值即文本框中的值，发现插值表达式中的值没有发生改变，在浏览器中的控制台输入vm点击回车键后查看vm中的msg的值也没有改变，所以说v-bind没法实现通过改变视图的值直接改变vm中数据的值。
在这里插入图片描述
那通过改变vm的值能否改变视图中插值表达式和v-bind中的值吗？答案是能。
如图，改变vm中msg中的值后视图中的插值表达式和v-bind的值同时发生了改变，所以说v-bind只能是单向绑定。

通过上面的实验，我们可以得知，v-bind是不能实现双向绑定的，看了这么多的废话，小编都觉得自己有些啰嗦了，来吧，各位饥渴的伙伴，我告诉你们

能实现双向绑定，那就是v-model

我们把v-bind换成v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World"
        }
    })
</script>

再次运行后就会发现，改变v-model中的值后，插值表达式和vm中的值都会发生改变，改变vm中的值后，插值表达式和v-model中的值也会随之改变，这样就实现了双向绑定。
在这里插入图片描述
demo1

v-model只适用于含有value值的标签中使用，并只代表value值，v-bind可以适用标签中的任何属性。
通过下面的例子可以很好的理解这句话。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="score">
        <br/>
        <input type="range" v-model="score" min="0" :max="maxValue">
        <br/>
        <select v-model="maxValue">
            <option value="100">100</option>
            <option value="1000">1000</option>
            <option value="10000">10000</option>
        </select>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            score:50,
            maxValue:100
        }
    })
</script>

vue语法中关于样式的写法

1.直接在p标签中加class=“backg”
2.通过v-bind，在p标签中加:class="‘backg’"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p class="backg">{{msg}}</p>
        或<p :class="'backg'">{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World"
        }
    })
</script>
<style>
    .backg{
        background-color: aquamarine;
    }
</style>

一个class中有多个样式的时候

<p :class="backg fontcolor">{{msg}}</p>
或
<p :class="['backg','fontcolor']">{{msg}}</p>

如何控制样式显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
    	<!--1.通过判断flag为是否决定显示哪个class标签-->
        <p :class="['backg',flag?'fontcolor':'fontcolor1']">{{msg}}</p>
        <!--2.0 通过判断flag为是否决定显示哪个class标签-->
        <p :class="['backg',flag?'fontcolor':'']">{{msg}}</p>
        <!--2.1 通过判断flag为是否决定显示哪个class标签-->
        <p :class="['backg',{'fontcolor':flag}]">{{msg}}</p>
        <!--只有一个class的时候不用[]-->
        <p :class="{'fontcolor':flag}">{{msg}}</p>
        <input type="text" v-model="msg">
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World",
            flag:false
        }
    })
</script>
<style>
    .backg{
        background-color: aquamarine;
    }
    .fontcolor{
        color:red;
    }
    .fontcolor1{
        color: blue;
    }
</style>

内联样式

<p style="background-color: brown;">{{msg}}</p>
<!--1.键值对直接填写法：内联样式属性可以不用单引号但是不能有但横线所以background-color要用单引号引起来，后面属性的值要用单引号-->
<p :style="{'background-color': 'brown'}">{{msg}}</p>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
    <!--2.键值对符合json格式的时候-->
        <p :style="style1">{{msg}}</p>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World",
            style1:{'background-color': 'brown',color:'white'}
        }
    })
</script>

<!--3.多个data可以用数组接收-->
<p :style="[style1,style2]">{{msg}}</p>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World",
            flag:false,
            style1:{'background-color': 'brown',color:'white'},
            style2:{'font-size':'18px'}
        }
    })
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
    <!--通过点击事件修改样式-->
        <p :style="[style1,style2]">{{msg}}</p>
        <button @click="change">变</button>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            msg:"Hello World",
            style1:{'background-color': 'brown',color:'white'},
            style2:{'font-size':'18px'}
        },
        methods:{
            change(){
                this.style2['font-size']="22px";
            }
        }
    })
</script>

当年幼儿园毕业的时候表演节目，合唱《世上只有妈妈好》。上台前老师把每个人屁股都打了一巴掌，还不准我们哭。等到上台越唱越委屈，边唱边哭，感动了全场观众，掌声雷动。

在这里插入图片描述

太阳的后裔

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue基础学习二

什么是双向绑定？看了视频资料，我对此的总结就是改变视图的值，vm的值也随之改变；改变vm的值，视图的值也能随之改变，这就是双向绑定。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" co
复制链接

扫一扫