vue的模板语法，列表渲染和条件渲染

vue.js 的模板语法，列表渲染和条件渲染

1. 模板语法

1. alert console.log 不能用

2. if条件改成使用三元表达式（三目运算）

3. 方法，函数一定要写在methods里面， 不要直接写在模板语法中
   

4. 模板语法中支持使用匿名函数可以直接写

    <p> fun: {{ (function(){ return 1+1 })() }}</p>

列表渲染

使用 v-for指令
v-for指令可以识别所有数据类型和数组，对象

item表示随便起什么名字都可以； 等于号后面的第一个参数为内容，如果需要下标或者key，可以用括号括起来，括号里第一个是下标，第二个是值，第三个是key，不需要的可以不用写。等于号后面第二个参数是 in 也就是for in遍历，第三个参数是你在vue实例中data中自定义的数据，可以是各种数据类型，数组或者对象。话不多说，看代码，等于号只是连接符，写不写都可以

总结:

1. v-for 最多可以有三个参数
2. 格式
   v-for = “(index,item,key) in data”
   名词解释：
   index: 索引
   item； data中的每一个
   key； 如果是对象， 表示对象的key
3. v-for如果有循环嵌套， 那么value可以写成一样的命名， 但是我们建议大家写成不一样的命名， 理由： 比较语义化
4. v-for 可以循环 数字或是一个字符
   扩展：
   v-for = ’ item in data’ 等于号后面的就是相当于参数 然后底层将这个字符串做了分割处理
   底层：

function v-for( arg ){
    //做字符串处理
    var data = 'data'
        for( var i = 0 ; i < data.length; i++ ){
        }
}

条件渲染

条件渲染分为两种，一种是 v-if ,一种是 v-show

• v-if又分为单路分支和双路分支或者是多路分支； 只有if后面的值为true时才会有这个dom元素，为false时不会有这个dom元素

<script>
    new Vue({
        el:'#app' ,
        data:{
            f:true，
            text:'a'
        }
     })
</script>

• 单路分支

                <p v-if = " f ">
                        true
            	</p>

• 双路分支

            <p v-if = " f ">
                 true
            </p>
            <p v-else>
                    false
            </p>

• 多路分支

        <p v-if = " text === 'A'"> A </p>
        <p v-else-if = " text === 'B'"> B </p>
        <p v-else> C </p>

v-show

<p v-show = " f ">
    if条件
</p>

v-if vs v-show

1. v-if 操作的是DOM存在与否, v-show操作的DOM的display样式属性

1.5.如果一开始条件为真的话，v-if不会生成dom元素，而v-show不管条件是否为真都会产生dom元素

2. 性能

• 如果条件为假，v-show有较高的初始渲染开销
• v-if 有更高的切换开销
  项目中建议：
  如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。