模板字符串内添加if判断或添加三元运算符判断

模板字符串内添加if判断或添加三元运算符判断

es6模板字符串例子：

var html = `<div class="a2">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>4</p>
            </div>`

模板字符串内添加if判断

var html = `<div class="a2">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p>
                    ${
                        (function(){
                            if(XXXXXXXXX){ //条件
                                return `XXXX`;
                            }else{
                                return '';
                            }
                        })()
                    }
                </p>
            </div>`

• 不要忘记在function结束以后再加一个（），否则会按照字符串直接解析了
• 如果返回的是一个动态数据记得return ``,如果使用return ''也是会直接解析为字符串

模板字符串内添加三元运算符判断

// 判断添加类名
var html = `<div class="a2">
                <p>1</p>
                <p>2</p>
                <p>3</p>
                <p ${ data[i].aaa ? 'class="hidden"' : ''></p>
            </div>`

// 判断状态
var html = `<div class="a2">
                <p>1</p>
                <p>2</p>
                <p>
                    ${data[i].status == '0' ? '空闲' : data[i].status == '1' ? '不空闲' : data[i].status == '2' ? '完成' :  '没完成'}
                </p>
                <p>4</p>
            </div>`