vue.js的一些模板指令简述

1.模板指令都是写在<template></template>html里面

 

v-text : value是什么就显示什么，如果value里面有html的标签，也会直接显示出来标签文本

v-html：会把value里面的标签转换成html的标签展示，不会显示成文本

v-if 如果为flase，是直接清除该元素 以注释形式 <!-- -->

v-show如果为flase，是通过display属性置为none的方式，让元素不显示

        <ul>
        <li v-for="(item, index) in items" v-bind:class ="{finished:item.isFinished}"  v-on:click="setline(item)"><!-- 如果v for只是对于数组遍历 -->
            {{item.lable}}-{{ index }}
        </li>
        </ul>
    <ul>
    <li v-for="(value, key) in objlist"><!-- 如果v for只是对于对象遍历 -->
      {{key}}--{{value}}
    </li>
    </ul>
    <ul>
    <li v-for="(item, index) in itemss"><!-- 如果v for只是对于数组遍历 -->
      {{item.name}}-{{ item.price }}
    </li>
    </ul>    

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>

如有还需要了解部分参考Vue.js API文档：

https://cn.vuejs.org/v2/api/#v-on

 

https://cn.vuejs.org/v2/api/#methods