首页 > HTML5资源教程 > VUE的class、style的使用与模板渲染

VUE的class、style的使用与模板渲染

日期：2018-05-19

来源：程序思维浏览：1972次

2.3.3.1. class的绑定

对象语法
数组语法

2.3.3.2. style的绑定

对象语法

使用对象的形式绑定样式
数组语法

绑定多个对象

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../node_modules/vue/dist/vue.js"></script>
        <style type="text/css">
            .active {
                background: pink;
                width: 200px;
                height: 200px;
                float: left;
                margin-left: 30px;
            }

            .bd {
                border: 1px solid red;
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <!--绑定单个类样式-->
            <div v-bind:class="{active:isActive}"></div>
            <!--绑定多个类样式-->
            <div v-bind:class="{active:isActive,bd:hasBorder}"></div>
            <!--使用对象的方式绑定类样式-->
            <div v-bind:class="classObject"></div>
            <!--使用数组绑定-->
            <div v-bind:class="[classA,classB]"></div>
            <!--三元表达式-->
            <div v-bind:class="[classA, isB ? classB : '']"></div>

            <!--内联样式的绑定-->
            <div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}">
                vue 内联样式的绑定
            </div>

        </div>
    </body>

</html>
<!--

样式的绑定
    1. v-bind:class="{active:isActive}

                   当绑定的数据isActive的值为true时,就会为该元素添加类样式

    2. v-bind:class="{active:isActive,bd:hasBorder}" 

                   支持混合类样式绑定,即同时绑定多个类样式


    3. v-bind:class="classObject"

                   支持使用对象绑定类样式

    4. v-bind:class="[classA,classB]"


    5. <div v-bind:class="[classA, isB ? classB : '']">


        当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。


-->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            isActive: true,
            hasBorder: true,
            classObject: {
                active: true,
                bd: true
            },
            //内联样式
            size: 19,
            width: 200,
            bgcolor: 'red',
            //数组形式
            classA: "a",
            classB: 'b',
            isB: true
        }
    })
</script>

模板渲染

2.4.1. 条件渲染

v-if　 v-else-if v-else

v-show

　支持模板语法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="../node_modules/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!--在这里加入模型数据-->
            {{ message }}


            <!--这里 v-if 指令将根据表达式 greeting 值的真假删除/插入 <p> 元素。-->
            <p v-if="greeting">Hello!</p>

            <!--bool值可以使条件表达式-->
            <p v-if="Math.random()>0.5">根据随机值判断是否显示</p>


            <!--使用v-if配合template可以实现模板渲染-->
            <template v-if='bool'>
                <h1>{{header}}</h1>
                <p>{{paragraph}} 1</p>
                <p>{{paragraph}} 2</p>
                <ul>
                    <li v-for="data in array">{{data}}</li>
                </ul>
            </template>
        </div>
    </body>

</html>
<script>
    var viewModel = {
        //模型数据的初始化
        message: 'hello world!',
        greeting:true,
        bool:true,
        header:"这是一个标题",
        paragraph:"这是一个段落",
        array:[1,2,3,4]

    }

    // viewModel    连接模型和数据库
    var vm = new Vue({
        el: '#app',
        data: viewModel,

    })
</script>

2.4.2. 列表渲染

v-for

支持模板语法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../node_modules/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!--view-->
            <ul>
                <span v-for="n in 10">{{n}}</span>
            </ul>
            <ul>
                <!--简单的列表渲染-->
                <li v-for='data in liData1'>
                    {{data}}
                </li>
            </ul>

            <ul>
                <!--复杂的列表渲染-->
                <li v-for='data in liData2'>
                    {{data.text}}
                </li>
            </ul>

            <ul>
                <!--添加index-->
                <li v-for="(data,index) in liData2">
                    {{data.text}}=======index===={{index}}
                </li>
            </ul>

            <!--模板语法-->
            <ul>
                <h2>模板渲染</h2>
                <template v-for="item in items">
                    <li>{{ item.name }}</li>
                    <li class="divider">{{item.age}}</li>
                </template>
            </ul>
        </div>
    </body>

</html>
<script>
    //    model
    var dataModel = {
        num: 10,
        liData1: [1, 2, 3],
        liData2: [{
            text: "这是一段文本"
        }, {
            text: "这是一段文本"
        }, {
            text: "这是一段文本"
        }, {
            text: "这是一段文本"
        }],
        items: [{
            name: 1,
            age: 1
        }, {
            name: 2,
            age: 2
        }]
    }

    // viewModel
    var app = new Vue({
        el: '#app',
        data: dataModel
    })
</script>

2.4.3. template模板用法(简单了解)

template标签用法

vue实例的 el 和 template 选项

配合使用,完成页面的渲染

组件/模板内部的元素一定要有一个根元素包裹

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--引入js-->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <!--视图的入口-->
        <div id="app">

        </div>
        <script id="tp1" type="x-template">
            <div class="tp1">
                <p>this is a tp1 from script tag</p>
            </div>
        </script>
    </body>
</html>
<script>

    //在这里,将template对应的script内部的元素挂载到对应的el所指定的位置
    var vm= new Vue({
        el:'#app',
        template:"#tp1"
    })
</script>

精品好课

Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程

2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...

最新完整React+VUE视频教程从入门到精，企业级实战项目

React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...

VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)

VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...

HTML5视频播放器video开发教程

适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...

HTML5基础入门视频教程易学必会

HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...

jQuery视频教程从入门到精通

jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......

React实战视频教程仿京东移动端电商

React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。

最新完整React视频教程从入门到精通纯干货纯实战

React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...