Vue条件渲染与列表渲染【Vue】

最新推荐文章于 2023-09-27 20:42:52 发布
最新推荐文章于 2023-09-27 20:42:52 发布
阅读量408 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53943447/article/details/129864637
版权

Vue

1.1 class 与 style 绑定

绑定样式：

  1. class样式
    写法:class=“xxx” xxx可以是字符串、对象、数组。
    字符串写法适用于：类名不确定，要动态获取。
    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  1. style样式
    :style="{fontSize: xxx}“其中xxx是动态值。
    :style=”[a,b]"其中a、b是样式对象。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>绑定样式</title>
		<style>
			.basic{
				width: 400px;
				height: 100px;
				border: 1px solid black;
			}
			
			.happy{
				border: 4px 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: gray;
			}
			.normal{
				background-color: skyblue;
			}

			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 30px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>
		<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>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				mood:'normal',
				classArr:['atguigu1','atguigu2','atguigu3'],
				classObj:{
					atguigu1:false,
					atguigu2:false,
				},
				styleObj:{
					fontSize: '40px',
					color:'red',
				},
				styleObj2:{
					backgroundColor:'orange'
				},
				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>
	
</html>

1.2 条件渲染

条件渲染：

  1. v-if 写法：
    （1）v-if=“表达式”
    （2）v-else-if=“表达式”
    （3）v-else=“表达式”
    适用于：切换频率较低的场景
    特点：不展示的DOM元素直接被移除
    注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被 “打断”
  1. v-show写法：
    v-show=“表达式”
    适用于：切换频率较高的场景。
    特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
  1. 备注：使用 v-if 的时候，元素可能无法获取到，而使用v-show 一定可以获取到。
<!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">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!-- 准备好一个容器 -->
    <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-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">
            <h2>你好</h2>
            <h2>西安文理</h2>
            <h2>西安</h2>
        </template>
           
        
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    const vm = new Vue({
        el: '#root',
        data: {
            name: '西安文理',
            n: 0
        }
    })
</script>
</html>

1.3 列表渲染

1.3.1 基本列表

v-for指令：
（1）用于展示列表数据
（2）语法： v-for="(item, index) in xxx" :key="yyy"
（3）可遍历：数组、对象、字符串(用的少)、指定次数(用的少)

<!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">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">

        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p, index) of persons" :key="p.id">{{p.name}} - {{p.age}}</li>
        </ul>

        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value, key) of car" :key="key">{{key}} : {{value}}</li>
        </ul>

        <!-- 遍历字符串 -->
        <h2>测试遍历字符串(用的少)</h2>
        <ul>
            <li v-for="(char, index) of str" :key="index">{{char}} : {{index}}</li>
        </ul>

        <!-- 遍历指定次数 -->
        <h2>测试遍历指定次数（用的少）</h2>
        <ul>
            <li v-for="(number, index) of 5" :key="index">{{index}} : {{number}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20},
            ],
            car: {
                name: '奥迪A8',
                price: '70万',
                color: '黑色'
            },
            str: 'hello'
        }
    })
</script>
</html>

1.3.2 Key的原理

面试题：react、vue中的key有什么作用？（key的内部原理）

  1. 虚拟DOM中key的作用：
    key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
  2. 对比规则：
    (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
    ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
    ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
    (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
    创建新的真实DOM，随后渲染到到页面。
  3. 用index作为key可能会引发的问题：
    （1） 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
    会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
    （2） 如果结构中还包含输入类的DOM：
    会产生错误DOM更新 ==> 界面有问题。
  4. 开发中如何选择key?:
    （1）最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
    （2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
<!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">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">

        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <li v-for="(p, index) of persons" :key="id">
                {{p.name}} - {{p.age}}
                <input type="text">
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20},
            ],
        },
        methods: {
            add(){
                const p = {id: '004', name: '老刘', age: 40}
                this.persons.unshift(p)
            }
        }
    })
</script>
</html>

1.3.3 列表过滤

在这里插入图片描述

<!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">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p, index) of filPersons" :key="p.index">{{p.name}} - {{p.age}} - {{p.sex}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false

    //用 watch 实现
    //# region
    /*new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [
                {id: '001', name: '马冬梅', age: 18,sex: '女'},
                {id: '002', name: '周冬雨', age: 19,sex: '女'},
                {id: '003', name: '周杰伦', age: 20,sex: '男'},
                {id: '004', name: '温兆伦', age: 21,sex: '男'},
            ],
            filPersons:[]
        },
        watch: {
            keyWord:{
                immediate: true,
                handler(val){
                    this.filPersons = this.persons.filter((p) => {
                    //函数体
                    return p.name.indexOf(val) !== -1
                    })
                }
            }
        }
    })*/
    //#endregion

    //用computed实现
    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [
                {id: '001', name: '马冬梅', age: 18,sex: '女'},
                {id: '002', name: '周冬雨', age: 19,sex: '女'},
                {id: '003', name: '周杰伦', age: 20,sex: '男'},
                {id: '004', name: '温兆伦', age: 21,sex: '男'},
            ],
        },
        computed: {
            filPersons(){
                return this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                    })
            }
        }
    })

</script>
</html>

1.3.4 列表排序

在这里插入图片描述

<!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">
    <title>Document</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType = 2">年龄升序</button>
        <button @click="sortType = 1">年龄降序</button>
        <button @click="sortType = 0">原顺序</button>
        <ul>
            <li v-for="(p, index) of filPersons" :key="p.id">{{p.name}} - {{p.age}} - {{p.sex}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    //用computed实现
    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            sortType: 0, //0原顺序 1降序 2升序
            persons: [
                {id: '001', name: '马冬梅', age: 30,sex: '女'},
                {id: '002', name: '周冬雨', age: 19,sex: '女'},
                {id: '003', name: '周杰伦', age: 24,sex: '男'},
                {id: '004', name: '温兆伦', age: 21,sex: '男'},
            ],
        },
        computed: {
            filPersons(){
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                    })
                    //判断以下是否需要排序
                    if(this.sortType){
                        arr.sort((p1, p2) => {
                            return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                        })
                    }
                    return arr
            }
        }
    })

</script>
</html>

1.3.5 Vue监测数据改变的原理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				name:'西安文理',
				address:'西安',
				student:{
					name:'tom',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35}
					]
				}
			}
		})
	</script>
</html>

1.3.6 Vue.set的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
			<h2>校长是：{{leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>年龄：真实{{student.age.rAge}}, 对外{{student.age.sAge}}</h2>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f, index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				name:'西安文理',
				address:'西安',
				student:{
					name:'tom',
					// sex: '男',
					age:{
						rAge:40,
						sAge:29,
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student, 'sex', '男')
					this.$set(this.student, 'sex', '男')
				}
			}
		})
	</script>
</html>

1.3.7 Vue监测数据改变的原理_数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Vue监测数据改变的原理</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h1>学校信息</h1>
			<h2>学校名称：{{school.name}}</h2>
			<h2>学校地址：{{school.address}}</h2>
			<h2>校长是：{{school.leader}}</h2>
			<hr/>
			<h1>学生信息</h1>
			<button @click="addSex">添加一个性别属性，默认值是男</button>
			<h2>姓名：{{student.name}}</h2>
			<h2 v-if="student.sex">性别：{{student.sex}}</h2>
			<h2>年龄：真实{{student.age.rAge}}, 对外{{student.age.sAge}}</h2>
			<h2>朋友们</h2>
			<ul>
				<li v-for="(f, index) in student.friends" :key="index">
					{{f.name}}--{{f.age}}
				</li>
			</ul>
			<h2>爱好</h2>
			<ul>
				<li v-for="(h, index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
		</div>
	</body>

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

		const vm = new Vue({
			el:'#root',
			data:{
				school: {
					name:'西安文理',
					address:'西安',
				},
				student:{
					name:'tom',
					// sex: '男',
					age:{
						rAge:40,
						sAge:29,
					},
					hobby: {
						h1: '抽烟',
						h2: '喝酒',
						h3: '打游戏'
					},
					friends:[
						{name:'jerry',age:35},
						{name:'tony',age:36}
					]
				}
			},
			methods: {
				addSex(){
					// Vue.set(this.student, 'sex', '男')
					this.$set(this.student, 'sex', '男')
				}
			}
		})
	</script>
</html>

1.3.8 总结 Vue 数据监测

Vue监测数据的原理：

  1. Vue 会监视data中所有层次的数据。
  2. 如何监测对象中的数据？
    通过 setter 实现监视，且要在new Vue时就要传入要监测的数据。
    （1）对象中后追加的属性，Vue默认不做响应式处理
    （2）如需给后添加的属性做响应式，请使用如下 API:
  • Vue.set(target, propertyName/index, value)
  • vm.$set(target, propertyName/index, value)
  1. 如何监测数组中的数据？
    通过包裹数组更新元素的方法实现，本质就是做了两件事：
    （1）调用原生对应的方法对数组进行更新
    （2）重新解析模板，进而更新页面
  2. 在 Vue 修改数组中的某个元素一定要用如下方法：
    （1）使用这些 API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()等
    （2）Vue.set() 或 vm. $ set()
  3. 替换数组
    变更方法，顾名思义，会变更调用了这些方法的原始数组。相比之下，也有非变更的方法，例如 filter()、contact()和slice()。他们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换就数组。
    特别注意： Vue.set() 和 vm. $ set() 不能给 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">
    <title>Document</title>
    <style>

    </style>
	<script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>学生信息</h1>

        <button @click="student.age++">年龄+1岁</button><br/>
        <button @click="addSex">添加性别属性，默认值：男</button><br/>
        <button @cilck="student.sex = '未知' ">修改性别</button><br/>
        <button @click="addFriend">在列表首位添加一个朋友</button><br/>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br/>
        <button @click="addHobby">添加一个爱好</button><br/>
        <button @click="updateHobby">修改第一个爱好为：开车</button><br/>
        <button @click="removeSmoke">过滤掉爱好中的抽烟</button>

        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h, index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们</h3>
        <ul>
            <li v-for="(f, index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
        const vm = new Vue({
            el: '#root',
            data: {
                student:{
                    name: 'tom',
                    age: 18,
                    hobby: ['抽烟', '喝酒', '打游戏'],
                    friends: [
                        {name: 'jerry', age: 35},
                        {name: 'tony', age: 36}
                    ]
                }
            },
            methods: {
                addSex(){
                    // Vue.set(this.student, 'sex', '男')
                    this.$set(this.student, 'sex', '男')
                },
                addFriend(){
                    this.student.friends.unshift({name: 'jack', age: 70})
                },
                updateFirstFriendName(){
                    this.student.friends[0].name = '张三'
                    // this.student.friends[0].age = '5'

                },
                addHobby(){
                    this.student.hobby.push('学习')
                },
                updateHobby(){
                    // this.student.hobby.splice(0, 1, '开车')
                    // Vue.set(this.student.hobby, '0', '开车')
                    this.$set(this.student.hobby, 0, '开车')
                },
                removeSmoke(){
                    //filter不影响原数组的改变；Vue也没有包裹这个 filter
                    this.student.hobby = this.student.hobby.filter((h) => {
                        return h !== '抽烟'
                    })
                }
            }
        })
</script>
</html>
赖皮.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
25.Vue列表渲染
爱米酱的博客
07-04 472
这一节开始我们来学一下Vue中与列表渲染相关的东西，这部分知识很重要，而且还比较多，所以我就拆成几个小节来讲。那么这一小节我们就先讲讲基本列表，把基本列表讲清楚之后，我们再讲key的原理，列表过滤和列表排序 实现效果：讲到这里这个遍历就已经实现了，但是这里还有一个特别重要的属性，就是key，我们这里不详谈这个属性，这一节我们只关注怎么配置这个属性即可，具体的深入分析内容会在下一节呈现。和key相关的内容我们可以在Vue官网的学习-->API中找到。 这个key属性就是给遍历的每一项加了一个特殊标识，虽然
【vue3】数据绑定，动态渲染class与style
芳草萋萋鹦鹉洲哦
03-28 5254
数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式（style）。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了。
【Vue】条件渲染&列表渲染来啦
最新发布
思索的涟漪，突破自我
09-27 400
小索奇全套Vue v-if这个指令根据表达式的真假来决定是否渲染元素例如: 2. v-else-if/v-elsev-else-if表示v-if的“else-if”条件,v-else表示最后的“else”条件例如: 3. 用key管理可复用元素让Vue通过key值识别元素,提高渲染效率例如: 4. v-show基于CSS显示/隐藏元素,只是切换display例如: 如果要频繁的更改，使用会更好点，因为它仅是切换隐藏显示，效率更高v-if 和 v-show 在条件渲染时的选择判断如下当需要完全切换显示/隐
实现vue的条件渲染
大侠isme
04-11 689
我的需求是根据设备不同的状态 渲染不同的标签。设备状态用device_State表示。在线上面是一个vue的标签，我有一个数据state ，如何让这个标签根据数据的取值 ，修改内容，如state=1时，标签修改为离线要根据数据的取值动态修改Vue组件的内容，可以使用条件渲染和绑定属性的方式来实现。具体来说，可以使用Vue的计算属性来根据state的取值返回不同的标签内容和属性，然后在模板中使用这个计算属性来动态渲染标签。
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
九七的博客
02-22 2023
【代码】vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题。
深入理解Vue 的条件渲染和列表渲染
08-29
本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue列表页渲染优化详解
01-21
vue列表页渲染优化，具体内容如下 想法 初始化时，vue会对data做getter、setter改造，在现代浏览器里，虽然JS已经足够快，但仍然有优化空间。 列表页的数据结构为： list: [ // 每一项有不同的来源，不同来源的...
Vue列表渲染的示例代码
10-17
主要介绍了Vue列表渲染的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue的模板语法，列表渲染和条件渲染
zhangyuea的博客
04-17 768
vue.js 的模板语法，列表渲染和条件渲染 1. 模板语法 alert console.log 不能用 if条件改成使用三元表达式（三目运算） 方法，函数一定要写在methods里面， 不要直接写在模板语法中 模板语法中支持使用匿名函数可以直接写 <p> fun: {{ (function(){ return 1+1 })() }}</p> ...
Vue-渲染：条件渲染、列表渲染
mantou_riji的博客
07-16 737
显示与隐藏。 表示显示 表示隐藏 实现原理：调用来控制显示与隐藏 控制台显示： v-show的值当然也可以是返回值为true或false的表达式。v-if也可以控制显示与隐藏 表示显示 表示隐藏 实现原理：将整个结构删除 控制台显示： 所以 v-if比v-show的消耗更大和 一起使用，和 的用法一样： 先判断v-if是否满足条件，如果不满足再判断 v-else-if是否满足条件 v-else 和else用法一样，和 v-if，v-else-if 一起用： 当v-if，v-else-if 都不满足条件
Vue2 第五节 class与style绑定，条件渲染和列表渲染
星星之火的语言c学习
07-30 949
1.class与style绑定2.条件渲染3.列表渲染。
vue中用Element-ui封装表单(form)和表格(table)组件动态渲染数据展示
热门推荐
前端探险家的博客
11-20 1万+
老样子，先来个效果图
前端之Vue：模板语法、指令、Style 和 Class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制
大大的博客
07-17 528
目录一、 模板语法插值语法二、 指令2.1 文本指令v-html：让HTML渲染成页面v-text：标签内容显示js变量对应的值v-show：显示/隐藏内容v-if：显示/删除内容2.2 事件指令v-on:click 可以缩写成@click2.3 属性指令v-bind:class=’js变量’可以缩写成：:class=’js变量’三、 Style 和 Class数据的绑定下方试验的命令四、 条件渲染五、 列表渲染1. v-if+v-for+v-else控制购物车商品的显示2. v-for遍历数组(列表)、对
vue6大指令和渲染器的用法
zy1992As的博客
04-10 333
data: {}.filterg: {//在 filters 节点下定义“过滤器”capitalize(str) { //把首字母转为大写的过滤器})过滤器(Filters)是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。--在双花括号中通过“管道符“调用capitalize过滤器，对message的值进行格式化-->-- 在 v-bind 中通过“管道符"调用 formatId 过滤器，对rawId的值进行格式化 -->
【Vue】在el-table的el-table-column中，如何控制单行、单列、以及根据内容单独设置样式。例如：修改文字颜色、背景颜色
qq_56715703的博客
07-26 4776
其实很好理解，row是行，控制台第一行打印的是数组中第一个对象。column是列，是el-table-column。rowIndex是行的索引，columnIndex是列索引。让我们打印出各个参数看一下代表了什么。在el-table中用v-bind绑定此属性。（v-bind的简写是：）用cell-style表属性来实现。在官网中是这样表述这个属性的。若想要label为inner-cron的字体加粗。如果我们想更改第一行的字体颜色是绿色。如果想要第一列的背景颜色是红色。
表格某一列根据值不同，显示不同颜色vue
m0_68428581的博客
04-18 2228
status的值来自字典。
Vue核心 绑定样式 条件渲染
weixin_44230693的博客
05-05 687
Vue核心 绑定样式 条件渲染
Vue简介、生命周期、模版语法、条件渲染、列表渲染、style和class绑定
狗头苏丹的博客
07-20 194
Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用--index.html,页面跳转用的vue插件路由来实现跳转。
vue element-UI条件查询渲染到table表格
wwwkm123的博客
12-09 3976
table表格数据 对应表格某行操作时的编辑和删除按钮 editForm表单 把对table表格某行数据的获取和渲染到editForm表单 store里面的actions模块里的方法 api.user.js里的findPrimaryKey方法 出现的问题：点击编辑按钮通过$index,row定位到ListUser的某行 （ListUser[index]）并且把所有数据渲染到编辑模态框（this.editForm=JSON.parse(JSON.stringfy(LIstU
Vue列表渲染
05-28
Vue 中的列表渲染可以使用 `v-for` 指令来实现。下面是一个简单的示例： ```html (item, index) in items" :key="index">{{ item }} ``` 上面的代码中，`v-for` 指令遍历了 `items` 数组，并将每个元素渲染为一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值