vue.js的基础学习

Author Avatar
lixuebing 11月 10, 2016

指令

  • v-bind 主要用于属性绑定

    • 缩写 :

    • 类型： any (with argument) | Object (without argument)

    • 参数： attrOrProp (optional)

    • 修饰符：.prop - 被用于绑定 DOM 属性。

    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      <tenplate>
      	<ul>
      		<li v-bind:class="[liClass]"></li>
      	</ul>	
      </template>
      <script>
      	export default{
      		data(){
      			//先赋值
      			liclass:"this is liClass"
      		}
      	}
      </script>
      <style></style>
      ***
      //在控制台显示出的效果是
      <li Class="this is liCalss"></li>
      //简单说这里的[liCalss]就是被解析为data里的数值
    • 1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      //如果想要控制class,可以在里面添加一个对象即给v-bind:class 一个对象，以动态地切换class
      <template>
      	<ul>
      		<li v-for="item in items" v-bind:class="{finished:item.isFinished}">{{item.list}}</li>
      	</ul>	
      </template>
      <script>
      	export default{
      		data(){
      			return{
      				items:[{
      					list:"hello,nice to meet you"
      					isFinished:flase
      				},{
      					list:"she is so beautiful"
      					isFinished:true
      				}]				
      			}
      		}
      	}
      </script>
      <style>
      	.finished{
      		text-decoration:underline;
      	}
      </style>
expand_less