使用vue.js 绑定数据,加载页面时都会先显示{{ message }},在显示数据.
请问有什么好的办法解决吗?
-------------------------html--------------------------------
{{ news_title1 }}
--------------------------js-----------------------------
new Vue({ el: '#news_banner_a', data: { news_title1: dataArr[0], news_title2: dataArr[1], news_title3: dataArr[2], news_title4: dataArr[3], url1: urlArr[0], url2: urlArr[1], url3: urlArr[2], url4: urlArr[3], imgPath1: imgPathArr[0], imgPath2: imgPathArr[1], imgPath3: imgPathArr[2], imgPath4: imgPathArr[3] }, methods: { hasload: function(dataArr) { // console.log(dataArr[0]); if(dataArr[0].length >= 4) { return true; } else { return false; } } } });
使用指令v-text
<span class="titles" v-if="hasload" v-text="news_title1"></span>
可以使用v-text
or v-html
替代 {{}}
<span class="titles" v-if="hasload" v-text="news_title1"></span>
1.可以添加v-cloak
<span class="titles" v-cloak v-if="hasload">{{news_title1}}</span>
2.可以将内容写到template中
<script type="template/vue" id="title"> <span class="titles" v-if="hasload">{{news_title1}}</span> </script>
3.用v-text