Vue.js 学习第二节 v-for v-bind指令学习

Vue.js 学习第二节 v-for v-bind指令学习

 

v-for指令学习

v-for

• 用法：基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名。

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

下面为例

<div id="app">
	<ul>
		<li v-for="food in foodList">{{food}}</li>
	</ul>
</div>

v-for.js的内容

效果图

同时 我们可以将data中的数组更改为对象组成的数组


效果图

v-bind指令学习

v-bind

• 缩写：:
• 用法： 动态地绑定一个或多个特性，或一个组件 prop 到表达式。 在绑定 class 或 style特性时，支持其它类型的值，如数组或对象

以下例子展示用v-bind完成对url的引用


效果图

以下例子展示用v-bind完成对image的引用

<img v-bind:src="img">

效果图

以下例子展示用v-bind完成对class的修改

	<a v-bind:class="klass" v-bind:href="url">
		click
		<img v-bind:src="img">
	</a>

效果图

此时我们可以看见a标签的class已经修改为btn btn-default

以下例子展示用v-bind将对象内容传入class中


效果图


此时我们可以看到class为active
我们可以通过console将isActive的属性改为false

此时class则为空，同时a标签的属性修改至原有属性