小米技术社区
小米技术社区管理员 关于小米

27岁,山西运城人,职业电商经理人,前端开发工作者,从事过网站建设、网络推广、SEO、SEM、信息流推广、二类电商、网络运维、软件开发,等相关电商工作,经验较为丰富,小米技术社区致力于为广大从事Web前端开发的人员提供一些力所能及的引导和帮助 ...[更多]

E-mail:mzze@163.com

Q Q:32362389

W X:xiaomi168527

小米介绍

小米技术社区大牛王飞 关于王飞

27岁,山西运城人,职业电商经理人,网络工程师兼运维,从事过运营商网络建设,企业网络建设、优化。数据中心网络维护等通过,经验丰富,座右铭:当自己休息的时候,别忘了别人还在奔跑。 ...[更多]

E-mail:wf_live@126.com

Q Q:3940019

微博:王小贱ss

小米技术社区设计小艳 关于小艳

大于花一样的年龄,河南郑州是我家,2010年在北京接触团购网,2011年进入天猫淘宝一待就是四年,如今已经将设计走向国际化(ps:误打误撞开始进入阿里巴巴国际站的设计,嘿嘿)五年电商设计,丰富经验,从事过天猫淘宝阿里各项设计,店铺运营,产品拍摄;我将我的经历与您分享是我的快乐!座右铭:越努力越幸运! ...[更多]

E-mail:97157726@qq.com

Q Q:97157726

标签云
精品推荐
您的位置:首页 > 前端开发 > Javascript > vue-js

Vue.js中的插值(插值表达式)和使用JavaScript表达式

分类: vue-js0个赞

下面demo中使用 {{}} 的形式在 html 中获取实例对象对象中 data 的属性值;

这种使用 {{}} 获取值得方式,叫做 插值 或 插值表达式 

<body>
    <div id="div">
        {{user_name}}
    </div>
</body>

// 两种引入方式,任意选择
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./vue.js"></script>


<script>
    var app = new Vue({
        el:'#div',  // 设置要操作的元素
        // 要替换的额数据
        data:{
            user_name:'我是一个div' 
        }
    })
</script>

数据绑定

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值:

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新。即便数据内容为一段 html 代码,仍然以文本内容展示 

<body>
    <div id="div">
       文本插值 {{html_str}}
    </div>
</body>
<script>
    var app = new Vue({
        el:'#div',
        data:{
            html_str:'<h2>Vue<h2>'
        }
    })
</script>


浏览器渲染结果:

<div id="div">文本插值 <h2>Vue<h2></div>


打开浏览器的 控制台的REPL 环境 输入 app.html_str = '<s>vue</s>'

浏览器渲染结果就会立刻发生改变: <div id="div">文本插值 <s>vue</s></div>



Vue.js使用JavaScript表达式


Vue.js 都提供了完全的 JavaScript 表达式支持,但是不能使用 JS 语句;

(表达式是运算,有结果;语句就是代码,可以没有结果)

    <div id="app">
        <!-- 插值   插值表达式 -->
        <s>{{us}}</s>
        
        <!-- 插值表达式可以使用运算符 支持三元运算符 -->
        {{us>3?'大':'小'}}

        <!-- 函数调用也可以 -->
        {{hh()}}

        <!-- 对象的调用 -->
        {{obj.name}}

        <!-- 但是不能写逻辑代码,如if -->
        <!-- {{if(us>1){
            console.log(1)
        }else{
            console.log(0)
        }}} -->

    </div>
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            us:1,
            hh:function(){
                return 4+3;
            },

            obj:{
                name:'李四'
            }
        }
    });

    // 打印
    console.log(app);

</script>


小米技术社区

本站内容均为小米原创,转载请注明出处:小米技术社区>> Vue.js中的插值(插值表达式)和使用JavaScript表达式