vue.js-step-everthing-1

来源：互联网发布：sql语言select语句编辑：程序博客网时间：2024/06/05 17:57

http://vuejs.org.cn/guide/syntax.html#绑定表达式

给<a href ="">动态绑定属性值
需求: 比如一个ajax请求的数据中有很多对象(例如一部部电影).每一部电影都有一个id,需要用这个id与一个baseUrl拼接成一个完整的URL

解决: 使用拼接字符串或者过滤器

过滤器

<a :href="data.top.id | fullInfoUrl" class="drama-link"></a><script src="vue.min.js"></script><script type="text/javascript">  $(document).ready(function() {    var vm = new Vue({        el: '#index-container',        data: {            data: {},            baseUrl: "/file?id="        },        methods: {            loadData: function() {                var self = this;                $.ajax({                    url: "v1/films",                    dataType: "json"                }).done(function(data) {                    self.data = data;                });            }        },        filters:{            fullInfoUrl: function(id){                return "/info?dramaId="+id            }        }    });    vm.loadData(); });</script>

字符串拼接(表达式)

<a href="/film?Id={{data.film.id}}" class="drama-link">

渲染结果
```
<a href="/film?id=001">电影1</a>
```

0 0