Vue.js 插值与表达式
2019-07-31 本文已影响0人
Rinaloving
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插值与表达式</title>
</head>
<body>
<div id="app">
{{ date}}
</div>
<div id="app2">
<!--若输出HTML，而不是数据解释后的纯文本，可以使用v-html: -->
<span v-html="link"></span>
</div>
<div id="app3">
<!--使用JavaScript表达式进行简单的运算、三元运算等，例如：-->
{{ number / 10}}
{{ isOK ? '确实':'取消'}}
{{ text.split(',').reverse().join(',') }}
<!--注：Vue.js 只支持单个表达式，不支持语句和控制流
不能使用流控制，要使用三元运算
{{ if (ok) return msg }}}
-->
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
date:new Date()
},
mounted: function(){
var _this = this; // 声明一个变量指向Vue实例this,保证作用域一致
this.timer = setInterval(function(){
_this.date = new Date(); // 修改数据 date
},1000);
},
beforeDestory:function(){
if(this.timer){
clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
}
}
})
</script>
<script>
var app = new Vue({
el:'#app2',
data:{
link:'<a href="#">这是一个连接</a>'
}
})
</script>
<script>
var app = new Vue({
el:'#app3',
data:{
number:100,
isOK:false,
text:'123,456'
}
})
</script>
</body>
</html>
插值与表达式.png
