vue 标签属性数据绑定和拼接的实现方法

在vue官网把文档扫了一遍后，就开始写网站项目了，没有设计，就百度里找了一个h5的助赢软件的网站把他copy下来，想想有点坏了，接着把内容改改吧。

首先开始做一个列表展示

vue实例好后，给对象添加默认数据，列表加载成功。查看源代码，看看是否和心目中想的一样。当前还只是把初始化的默认数组展示出来，列表里面的操作，跳转还没有加，试着给初始化的数组添加id字段和数字

刷新一下，没有效果，坑人的Chrome，缓存特别严重，不得不清缓存或者强制刷新。vue在控制台出错了，说a标签内容（<a href="xxx/detail/{{id}}" rel="external nofollow" >文章1</a>）的{{id}}语法错误，查了下文档并没有一个类似的例子，我就开始凭自己的经验试着改写下
整了好一会，发现不理想，看来文档读的不够仔细，有必要针对性的的捣一下。看到标签的class与syle绑定，看到有对象语法和数组语法，二话不说，先把对象写法写进去a标签，刷新看效果，发现a标签的href是这样detail/[object object]，我笑了。

看来还是用错了，看了数组语法描述后，直接coding，<a v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >文章1</a> 这下出效果了

为什么叫数组语法，一直不明白了。为什么这个地方只能这样写，总感觉不妥，找个类似的安全看看，别人是怎么写的，发现自己写的太吐血了

先上部分代码

<tr v-for="item in Strategys" class="ng-scope">
 <td>
　　<a class="ng-binding ng-scope" v-bind:href="['xxx/detail/'+item.Id]" rel="external nofollow" rel="external nofollow" >{{item.Name}}</a>
 </td>

数据块代码

var vm = new Vue({
　　el: '#section-strategies',
　　data: {
　　　　　　parentMessage: 'Parent',
　　　　　　StrategyCnt:0,
　　　　　　Strategys: [{id:1,name:'文章1'}，{id:2,name:'文章2'}]
　　}
 })

接着上大招，使用Ajax请求服务端数据，不可能一直用初始化及默认的数据

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue.js在标签属性中插入变量参数的方法

    html的标签的属性,比如id.class.href需要动态传递参数,拼接字符串,查了一些资料,并没有找到合适的解决方法,琢磨了一上午,终于试出了方法: v-bind:属性=" '字符串'+自定义变量名",自己试了没问题,有需要的朋友可以借鉴下! 最后需要注意一下属性一定是":属性="这种形式才会起作用 <ul class="menu" v-for="(item,index) in 4"> <li :clas

  • vue 标签属性数据绑定和拼接的实现方法

    在vue官网把文档扫了一遍后,就开始写网站项目了,没有设计,就百度里找了一个h5的助赢软件的网站把他copy下来,想想有点坏了,接着把内容改改吧. 首先开始做一个列表展示 vue实例好后,给对象添加默认数据,列表加载成功.查看源代码,看看是否和心目中想的一样.当前还只是把初始化的默认数组展示出来,列表里面的操作,跳转还没有加,试着给初始化的数组添加id字段和数字 刷新一下,没有效果,坑人的Chrome,缓存特别严重,不得不清缓存或者强制刷新.vue在控制台出错了,说a标签内容(<a href=&qu

  • javascript通过获取html标签属性class实现多选项卡的方法

    本文实例讲述了javascript通过获取html标签属性class实现多选项卡的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>原生javascript通过获取html标签属性class实现多选项卡</title> <style type="text/css">

  • 关闭Vue计算属性自带的缓存功能方法

    使用Vue的小伙伴都会知道,vue的计算属性.这个是这个样子解释的,当某些依赖值发生变化的时候,其自身的值也会发生变化,与之先关的DOM也会发生变化,通常呢,这个计算属性里面都会有两个方法:get和set可以使用. 这里我只分析一下,如何关闭计算属性的缓存,获取最新数据,如下实例: HTML代码 <div id="mess"> <div>{{exapm}}</div> </div> JS代码: var vue2 = new Vue({ e

  • vue计算属性及使用详解

    一.什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理.  二.计算属性的用法 在一个计算属性里可以完成各种复杂的逻辑,包括运算.函数调

  • vue中v-for循环给标签属性赋值的方法

    1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &

  • Vue.js中数据绑定的语法教程

    数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新.

  • Vue入门之数据绑定(小结)

    Vue入门之数据绑定(小结)

    1. 什么是双向绑定? Vue框架很核心的功能就是双向的数据绑定. 双向是指:HTML标签数据 绑定到 Vue对象,另外反方向数据也是绑定的.通俗点说就是,Vue对象的改变会直接影响到HTML的标签的变化,而且标签的变化也会反过来影响Vue对象的属性的变化. 这样以来,就彻底变革了之前Dom的开发方式,之前Dom驱动的开发方式尤其是以jQuery为主的开发时代,都是dom变化后,触发js事件,然后在事件中通过js代码取得标签的变化,再跟后台进行交互,然后根据后台返回的结果再更新HTML标签,异常

  • 在Vue中使用Select选择器拼接label的操作

    我就废话不多说了,大家还是直接看代码吧~ <el-form-item label="货道商品" prop="productid"> <el-select v-model="form.productid" filterable placeholder="请选择" @change="changeselect"> <el-option v-for="item in mypr

  • 深入了解Vue中双向数据绑定原理

    目录 数据的变化反应到视图 命令式操作视图 声明式操作视图 小结 视图的变化反应到数据 现存的问题 数据的变化反应到视图 前面我们了解到数据劫持之后,我们可以在数据发生修改之后做任何我们想要做的事情,操作视图当然也是OK的 命令式操作视图 目标:我们通过原始的操作dom的方式让每一次的name的最新值都能显示到p元素内部 <div id="app"> <p></p> </div> <script> let data = { n

随机推荐