Vue.js 插值与表达式

作者: Rinaloving | 来源:发表于2019-07-31 15:33 被阅读0次

Vue.js学习总结第一天
vue 的基本语法和常用指令
Vue.js 插值与表达式
VUE.JS中的插值表达式、v-cloak、v-text、v-h
Vue
vue基础-插值表达式与常用指令
Vue实例化
vue入门(一)
Vue基本指令的使用
Vue常用指令（完结版）

<!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