Vue常见指令补充（附加案例）

最新推荐文章于 2022-11-24 14:49:19 发布

青青草原小魔王

最新推荐文章于 2022-11-24 14:49:19 发布

阅读量323

点赞数 3

分类专栏： VUE 文章标签： vue.js javascript html5 开发语言

本文链接：https://blog.csdn.net/qq_65715980/article/details/126000030

版权

VUE 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的v-for指令用于遍历数组和对象，以及v-bind指令的使用，包括动态绑定属性、绑定class等。通过实例展示了v-bind与v-for结合的应用，探讨了动态绑定class时数组和对象的区别。

摘要由CSDN通过智能技术生成

一、v-for数组或对象中的每一个值

1.数组

in/of 数组或对象本身

		<div id="app">
			<h2 v-for="item in todolists">{{item}}</h2>
			<h2 v-for="item of todolists">{{item}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						todolists: ['篮球', '排球', '羽毛球', '足球'],
					}
				}

			})
		</script>

输出结果都是一样的。

2.对象

		<div id="app">
			<h2 v-for="item in obj">{{item}}</h2>
			<h2 v-for="item of obj">{{item}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						obj: {
						a: '张三',
						b: '李四',
						c: '王五'
					       }
					}
				}

			})
		</script>

结果也是一样的。

二、v-bind动态绑定

1.v-bind指令

<div id="app">
  <img :src="src" />
  <img :src="url" />
</div>
<script>
const vm = new Vue({
	el:'#app',
		data(){
			return {
		    src:'https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1',
			url:'img/img.png'  //本地图片路劲 没有添加
					}
				}
				
			})
	</script>

2.v-bind绑定对象

		<style>
			.active {
				color:#f00;  //修改字体样式
			}
		</style>
	</head>
	<body>
		<div id="app">
		     <h2 :class="changeActive()" @click="change">{{msg}}</h2> //点击事件
		</div>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						msg:'动态绑定对象',
						isactive:false    、//点击前状态未变色
					}
				},
				methods:{
					change(){
						this.isactive = !this.isactive  //点击后通过反向变为真  变色
					},
					changeActive(){
						return {active:this.isactive}
					}
				}				
			})

点击前点击后

3.v-bind和v-fo结合（案例）

点文字变色

    <style>
        .active {
            color: red;    //创建变色样式
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in movies" :key="index"  //通过v-for获取数组元素及索引
            @click="change(index)"         //为点击添加索引，点击时输出点击索引
            :class="aindex==index?'active':''">//通过三元表达式判断状态，为点击事件添加颜色
                {{item}}</li>
        </ul>
    </div>
    <script src="../../练习/js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                aindex: 0,
                movies: ['111', '222', '333', '444', '555'],
            },
            methods: {
                change(index) {
                    this.aindex = index   //通过相等判断第几个元素被点击
                }
            }
        })
    </script>

4.v-bind动态绑定class数组的用法

	<div id="app">
			<h2 :class="['active','aaa']">我们正在学习vue</h2>
			<h2 :class="[active,aaa]">我们正在学习vue</h2>
			<h2 :class="getStyle()">我们正在学习vue</h2>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						active:'isactive',
						aaa:'bbb'
					}
				},
				methods:{
					getStyle(){
						return [this.active,this.aaa]
					}
				}
				
			})

数组中加引号和不加引号有区别

加引号:表示字符串是固定的,

不加引号:表示变量是不固定的

5.v-bind动态绑定class对象的语法

		<div id="app">
			<h2 :style="{fontSize:'50px'}">我们爱学习</h2>
			<h2 :style="{fontSize:fontsize}">我们爱学习</h2>
			<h2 :style="getStyle()">我们爱学习</h2>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
						fontsize:40+'px'
					}
				},
				methods:{
					getStyle(){
						return {fontSize:this.fontsize}
					}
				}
			})
		</script>

5.v-bind动态绑定class对象的语法

<div id="app">
			<h2 :style="[baseStyle]">我们爱学习</h2>
			<h2 :style="['baseStyle']">我们爱学习</h2><!-- 无意义 -->
			<h2 :style="getStyle()">我们爱学习</h2>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			const vm = new Vue({
				el:'#app',
				data(){
					return {
					  baseStyle:{background:'#f00'}	
					}
				},
				methods:{
					getStyle(){
						return [this.baseStyle]
					}
				}
				
			})