vue 数据绑定，条件渲染，列表渲染

1.  数据绑定{{}}

<div> message:{{msg1}}</div>

配合js中的data()定义数据

export default{
        name:'hello',
        data(){
                return {
                        msg1:"消息"
                }
        }
}

2. {{}}中的数据只会解释为普通文本，如果要设置html代码，就要v-html指令

<p> {{rawHtml}}</p>
<p v-html="rawHtml"> </p>
data(){
        return{
                 msg1:"测试",
                rawHtml:"<a href=‘https://www.baidu.com’>baidu</a>"
        }
}

3. mustache语法不能再html属性里使用，但可以用v-bind指令

<div v-bind:id="dynamicId"></div> 会等同于<div id="10001"></div>
也可以简写成<div :id="dynamicId"></div>

data(){
        return{
                dynamicId:1001
        }
}

4. v-if v-else

<p v-if="flag"> 1</p>
<p v-else>2</p>

data(){
        return{
                flag:1  or 0
} 

5.v-show 仅切换了该元素上名为display的CSS属性

<h1 v-show="flag">Hello!</h1>

6.v-for 列表渲染

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。​​​​​​​推荐在任何可行的时候为 v-for 提供一个 key attribute。

基础使用：    <li v-for="item in newList" :key="index.id">    {{index }} {{ item }}    </li>   in也可以用of

<li v-for="item in newList" :key="index">   
     {{index }} {{ item }}    
</li>   in也可以用of

data(){
  return{
    newList:[{
        id:1001,
        title:"信息1"
      }，{
        id：1002，
        title:"信息2"
      }]}}


0 { "id": 1001, "title": "信息1" }
1 { "id": 1002, "title": "信息2" }

index,key,value的使用

  <ul>
    <li v-for="(value, key, index) in list1" :key="value"> 
      {{ index }}. {{ key}}: {{ value }}
    </li>
  </ul>

list1:{a:1,b:2}

0. a: 1
1. b: 2