03.Vue.js : 插值表达式的使用

屋顶上的小喵

于 2019-03-17 19:13:59 发布

阅读量1.1k

点赞数

分类专栏： Vue.js 文章标签： Vue.js

本文链接：https://blog.youkuaiyun.com/vivian_1122/article/details/88624473

版权

Vue.js 专栏收录该内容

38 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <title>插值表达式的使用</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue1026.js"></script>
</head>

<body>
    <div id="app">
        <p>{{name}}</p>
        <p>{{age}}</p>

        <!-- 插值表达式的合法使用法有：表达式/三元运算符 -->
        <p>{{'李'+name}}</p>
        <p>{{age+1}}</p>
        <!-- 翻转字符串 -->
        <p>{{name.split('').reverse().join('')}}</p>
        <p>{{age>18?'已成年'：'未成年'}}</p>
        <!-- <p>{{if(age>18){return '已成年'}}}</p>错误用法 -->
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                name: 'jack',
                age: 18
            }
        })
    </script>
</body>

</html>

v-bind:给属性绑定对应的值

v-html:给属性绑定标签

实例化Vue对象
new Vue({

    el:'#app',
    data:{
     name:'vivi',
     job:'web开发'
  },
  methods:{
   greet:function(){
    return 'Good Morning';
  }
 }
})







//el:element 需要获取的元素，一定是html中的根容器元素
//data:用于数据的存储
//methods: