Vue入门及简单使用_样式控制-style_class_条件渲染_列表渲染_事件处理_数据双向绑定_表单控制

最新推荐文章于 2024-06-13 15:01:17 发布

I believe I can fly~

最新推荐文章于 2024-06-13 15:01:17 发布

阅读量419

点赞数

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

本文链接：https://blog.csdn.net/qq_31455841/article/details/111239128

版权

Vue 入门

在这里插入图片描述

1. 样式控制

1. style和class的控制

1. class的三种控制方式

# 样式
<body>
<div id="box">
    
<h1>class的三种写法</h1>
<div :class="isActive?'red':'green'">class三目写法</div>
<p :class="classObj">class对象写法</p>
<p :class="classarr">class数组写法</p>
    
</div>
</body>
    
# 数据
<script>
    var vm = new Vue({
    
        el: '#box',
        data: {
    
            isActive: true,
            // classObj:'red',
            classObj: {
    red: true, green: false, font: true},
            classarr: ['red', 'green'],
        },
    })
</script>

2. style的三种控制方式

# 样式
<body>
<div id="box">
    
<h1>style的三种写法</h1>
<div style="background:red">style三目写法</div>
<div :style="'background:red'">style三目写法</div>
<div :style="'background:'+'red'">style三目写法</div>
<div :style="'background:'+(isActive?'red':'green')">style三目写法</div>
<p :style="styleobj">style对象写法</p>
<p :style="styleattr">style数组写法</p>
        
</div>
</body>

# 数据
<script>
    var vm = new Vue({
    
        el: '#box',
        data: {
    
            isActive: true,
            //把原来的- 改成驼峰
            styleobj: {
    background:'yellow',fontSize:'60px'},
            styleattr: [{
    background:'red'},]
        },
    })
</script>

2. 条件渲染

1. 通过v-if和v-for实现购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <style>
        .red {
    
            background: red;
        }

        .green {
    
            background: green;
        }

        .font {
    
            font-size: 30px;
        }

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">

    <!--    土办法-->
    <!--    <ul>-->
    <!--        <li>{
   {shopping[0]}}</li>-->
    <!--        <li>{
   {shopping[1]}}</li>-->
    <!--        <li>{
   {shopping[2]}}</li>-->
    <!--    </ul>-->

    <!--v-for实现-->
    <ul v-if="shopping.length>0">
        <li v-for="data in shopping">{
  {data}}</li>
    </ul>
    <div v-else>购物车空空如也</div>
</div>

</body>
<script>
    var vm = new Vue({
    
        el: '#box',
        data: {
    
            shopping: ['苹果', '香蕉', '桃子'],
        },

    })
</script>
</html>

2. v-if/v-else-if/v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <style>

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
    <div v-if="which==1">1111</div>
    <div v-else-if="which==2">2222</div>
    <div v-else>3333</div>
</div>

</body>
<script>

最低0.47元/天解锁文章

I believe I can fly~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue入门及简单使用_样式控制-style_class_条件渲染_列表渲染_事件处理_数据双向绑定_表单控制

Vue 入门1. 样式控制1. style和class的控制1. class的三种控制方式# 样式<body><div id="box"> <h1>class的三种写法</h1><div :class="isActive?'red':'green'">class三目写法</div><p :class="classObj">class对象写法</p><p :class="class
复制链接

扫一扫