Vue核心绑定样式条件渲染

最新推荐文章于 2024-02-12 16:28:54 发布

怀梦

最新推荐文章于 2024-02-12 16:28:54 发布

阅读量687

点赞数

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

本文链接：https://blog.csdn.net/weixin_44230693/article/details/130514647

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

1.11.绑定样式

class样式：

写法：:class=“xxx”，xxx 可以是字符串、数组、对象
:style=“[a,b]” 其中a、b是样式对象
**:style=“{fontSize: xxx}”**其中 xxx 是动态值
- 字符串写法适用于：类名不确定，要动态获取
- 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定
- 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>绑定样式</title>
	<style>
		.basic {width: 300px;height: 50px;border: 1px solid black;}
		.happy {border: 3px solid red;background-color: rgba(255, 255, 0, 0.644);
		background: linear-gradient(30deg, yellow, pink, orange, yellow);}
		.sad {border: 4px dashed rgb(2, 197, 2);background-color: skyblue;}
		.normal {background-color: #bfa;}
		.atguigu1 {background-color: yellowgreen;}
		.atguigu2 {font-size: 20px;text-shadow: 2px 2px 10px red;}
		.atguigu3 {border-radius: 20px;}
	</style>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
	<!-- 准备好一个容器 -->
	<div id="root">
		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 --> 
		<div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/><br/>
		
		<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
		<div class="basic" :class="classArr">{{name}}</div><br/><br/>
		
		<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
		<div class="basic" :class="classObj">{{name}}</div><br/><br/>
		
		<!-- 绑定style样式--对象写法 -->
		<div class="basic" :style="styleObj">{{name}}</div><br/><br/>
		
		<!-- 绑定style样式--数组写法 -->
		<div class="basic" :style="styleArr">{{name}}</div>
	</div>

	<script type="text/javascript">
		// 阻止vue在启动时生成生产提示
		Vue.config.productionTip = false

		new Vue({
			el: '#root',
			data:{
				name: '尚硅谷',
				mood: 'normal',
				classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
				classObj: { 
					atguigu1: false, 
					atguigu2: false
				},
				styleObj: { 
					fontSize: '40px', 
					color: 'red'
				},
				styleObj: { 
					fontSize: '40px', 
					color: 'red', 
				},
				styleArr: [ 
					{ 
						fontSize: '40px', 
						color: 'blue' 
					}, 
					{ 
						backgroundColor: 'gray',
					}
				]
			},
			methods: { 
				changeMood() { 
					const arr = ['happy', 'sad', 'normal']; 
					const index = Math.floor(Math.random() * 3); 
					this.mood = arr[index];
				}
		});
	</script>
</body>
</html>

在这里插入图片描述

1.12.条件渲染

v-if

写法跟 if else 语法类似

v-if=“表达式”

v-else-if=“表达式”

v-else
适用于：切换频率较低的场景，因为不展示的DOM元素直接被移除
注意：v-if可以和v-else-if v-else一起使用，但要求结构不能被打断

v-show

写法：v-show=“表达式”
适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉display: none

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到

template标签不影响结构，页面html中不会有此标签，但只能配合v-if，不能配合v-show

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--
        条件渲染:
            1.v-if
              写法:
                  (1).v-if="表达式"
                  (2).v-else-if="表达式"
                  (3).v-else="表达式"
              适用于: 切换频率较低的场景。
              特点: 不展示的DOM元素直接被移除。
              注意: v-if可以和v-else-if、v-else一起使用，但要求结构不能被"打断"
              
           2.v-show
              写法: v-show="表达式"
              适用于:切换频率较高的场景。
              特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
           
           3.备注: 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
    -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前的n值是:{{ n }}</h2>
        <button @click="n++">点我n+1</button>

        <!-- 使用v-show做条件渲染 -->
        <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
        <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

        <!-- 使用v-if做条件渲染 -->
        <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
        <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

        <!-- v-else和v-else-if -->
        <!-- <div v-show="n === 1">Angular</div> -->
        <!-- <div v-show="n === 2">React</div> --> 
        <!-- <div v-show="n === 3">Vue</div> -->

        <!-- <div v-if="n === 1">Angular</div> -->
        <!-- <div v-else-if="n === 2">React</div> -->
        <!-- <div v-else-if="n === 3">Vue</div> -->
        <!-- <div v-else>哈哈</div> -->

        <!-- v-if与template的配合使用 --> 
        <template v-if="n === 1"> 
            <h3>你好</h3> 
            <h3>尚硅谷</h3> 
            <h3>北京</h3> 
        </template>
    </div>

    <script type="text/javascript">
        // 阻止vue在启动时生成生产提示
        Vue.config.productionTip = false
		
		new Vue({ 
			el: '#root',  	  
			data:{
                name:'尚硅谷',
                n:0
			},
		});
    </script>
</body>
</html>