vue的知识总结2

一、插值

1、文本

<p>hello{{message}}</p>
<p v-text="message">hello</p>       message代表的内容会将hello替换
<p v-once  v-text="message">hello</p>     数据改变时，内容不会改变

2、HTML

{{}}会将html内容作为字符串输出，如果想输出标签，那么使用v-html  <p  v-html="message"></p>
{{}}不能用于标签的属性，可以用于v-bind <button v-bind :disabled="isDIsabled">按钮</button>

3、简单表达式

{{number +1}}
{{ ok ? 'YES';'NO'}}
{{  message.split('').reverse().join("")}}
<div v-bind:id=" 'list-' + id"></div>
<！--这是语句，不是表达式-->{{var a=1}}
<! --流控制也不会生效，请使用三元表达式--->{{ if (ok)  {return message}   }}

  

二、相关指令

v-text   获取文本内容，但不能转义标签
v-html  获取文本内容，可以转义标签
v-show  只是判断是否将标签隐藏
v-if
v-else
v-else-if
v-for
v-on  绑定点击事件
v-bind  给标签一个动态数据
v-model   双向绑定 一般用于input 和value
v-pre
v-cloak
v-once

 三、列表渲染和条件渲染

1、列表渲染

遍历数组
    <url>
    <li  v-for="(num,index)  in  numLIst":key="index">{{index}}:{{num}}</li>
遍历对象
    <url>
    <li  v-for="(num,index) in person ">{{index}}-{{key}}:{{item}}</li>
</url>

遍历数字
    <div>
   <span   v-for="n  in  10">{{n}}</span>
</div>

重复多条内容
    <ul>
   <template  v-for="item  in  items">
     <li>{{item.msg}}</li>
     <li  class="divider   role="presenation"></li>
     </template>
</ul>

2、条件渲染

 相关指令
    v-if
        <p  v-if="tag==='a'">这里是A</p>
    v-else-if
        <p  v-else-if="tag==='c">这里是c</p>
    v-else
        <p  v-else>这里什么都不是c</p>

  v-show
    <p  v-show="is" >嘿嘿嘿嘿</p>
    v-if  是真正的条件渲染
    v-show只是判断是否将标签隐藏