二、vue中v-bind使用_html-js-css

一、v-bind基本使用

一个页面中，除了标签内容需要动态绑定外，标签的属性也需要动态绑定，例如：a元素的href属性和img元素的src属性。这时就需要用到v-bind了。

<body>
    <div id="app" >
        
        <img v-bind:src="imgUrl">
         
        <a v-bind:href="aHref">百度一下a>
        
        <img :src="imgUrl">
        <a :href="aHref">百度一下a>
    div>
<script src="./js/vue.js">script>
<script>
    //vue解析时去掉v-cloak属性，标签显示
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            imgUrl: 'http://www.kaotop.com/file/tupian/20220523/1d597ef0cf85be04.jpg!q70.jpg.webp',
            aHref: 'http://www.baidu.com'
        }
        })
script>
body>

效果图：

二、v-bind动态绑定class属性普通语法(了解)

<head>
    <style>
        .colourStyle {
            color: red;
        }
    style>
head>
<body>
    <div id="app" >
        
        <h1 class="colourStyle">{{message}}h1>
        
        <h1 v-bind:class="active">{{message}}h1>
    div>
<script src="./js/vue.js">script>
<script>
    //vue解析时去掉v-cloak属性，标签显示
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data:{ //定义数据
            message: 'hello! kebe',
            active: 'colourStyle'
        }
        })
script>

对象语法（掌握）
在实际的开发工作中，有时后需要动态的管理页面元素的样式，这时候，就需要v-bind动态绑定class属性的对象
格式：{类名1: Boolean，类名2: boolean,…}

head>
    <style>
        .colourStyle {
            color: red;
        }
    style>
head>
<body>
    <div id="app" >
        
        <h1 class="test" :class="{colourStyle: colourStyle,line: line}">{{message}}h1>
        
        <h1 class="test" :class="getClassStyle()">{{message}}h1>
    div>
<script src="./js/vue.js">script>
<script>
    //vue解析时去掉v-cloak属性，标签显示
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data: { //定义数据
            message: 'hello! kebe',
            colourStyle: true,
            line:true
        },
        methods: {
            getClassStyle: function(){
                return {colourStyle: this.colourStyle,line: this.line};
            }
        }
        })
script>
body>

效果图一：当colourStyle和line都为true时，h1 标签的class属性会有三个class，其中一个是固定的，另外两个是动态绑定的，其中test为固定样式，其他为动态绑定样式。并且，从上面代码中可以观察到，vue将常规class和v-bind绑定的class合并了。

效果图二：将其中一个动态样式修改为flase时，h1标签的class属性会少一个。

数组语法（了解）
格式：[‘变量1’,‘变量2’,‘变量3’,‘变量4’,…]

<head>
    <style>
        .colourStyle {
            color: red;
        }
    style>
head>
<body>
    <div id="app" >
        
        <h1 class="test" :class="['colourStyle','line']">{{message}}h1>
        
        <h1 class="test" :class="getClassStyle()">{{message}}h1>
    div>
<script src="./js/vue.js">script>
<script>
    //vue解析时去掉v-cloak属性，标签显示
    const app = new Vue({
        el: "#app", //用户挂载要管理的元素 
        data: { //定义数据
            message: 'hello! kebe',
            colourStyle: 'colourStyle',
            line: 'line'
        },
        methods: {
            getClassStyle: function(){
                
                return [this.colourStyle,this.line];
            }
        }
        })
script>
body>

三、v-bind 动态绑定style

动态绑定style在组件化开发时常用，例如将页面的搜索框分装为一个组件，在不同的页面调用，然而不同的网页样式风格可能不一致，这是组件的样式需要动态控制。

对象语法

 <body>
        <div id="app">
            
            
            
            
            
            <h2 v-bind:style="{fontSize: '50px',color: finalColor}">{{message}}h2>
            <h2 v-bind:style="{fontSize: fontSize }">{{message}}h2>
            
            <h2 v-bind:style="{fontSize: fontSize1 + 'px' }">{{message}}h2>
        div>
        <script src="./js/vue.js">script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    // 模拟后端传参
                    message: '你好',
                    fontSize: '100px',
                    fontSize1: 100,
                    finalColor: 'red'

                }
            })
        script>
    body>

效果图：

数组语法

<body>
        <div id="app">
            
            <h2 v-bind:style="[baseStyle,baseStyle1]">{{message}}h2>
        div>
        <script src="./js/vue.js">script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    // 模拟后端传参
                    message: '你好',
                    baseStyle: {fontSize: '100px'},
                    baseStyle1: {color: 'red'}

                }
            })
        script>
    body>

效果图：

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1299045.html

二、vue中v-bind使用

发表评论

评论列表（0条）