嘻嘻,发现引导+ vue.js拿来做原型效率挺高,以后就这样做原型
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt;链接rel="样式表" type=" text/css " href=" https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css " rel=巴獠縩ofollow”比;
& lt;脚本src=" https://cdn.bootcss.com/jquery/3.1.1/jquery.js "祝辞& lt;/script>
& lt;脚本src=" https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js "祝辞& lt;/script>
& lt;脚本src=" https://unpkg.com/vue/dist/vue.js "祝辞& lt;/script>
& lt;/head>
& lt;/head>
& lt; body>
& lt; div类="容器"比;
& lt; !——开始列表——比;
& lt; div class=" col-md-6 col-md-offset-3”比;
& lt; h2> Vue demo
& lt; div id=坝τ谩北?
& lt;表类=氨怼痹?
& lt; tr>
& lt; td> & lt;输入类型=案囱】颉弊４? lt;/td>
& lt; td> id
& lt; td>书名& lt;/td>
& lt; td>作者& lt;/td>
& lt; td>价格& lt;/td>
& lt;/tr>
& lt; tr v=笆槭椤痹?
& lt; td>
& lt; label>
& lt;输入类型=案囱】颉眝-bind: value=" https://www.yisu.com/zixun/book.id " v模型=癱heckedNames”比;
& lt;/label>
& lt;/td>
& lt; td> {{book.id}} & lt;/td>
& lt; td> {{book.name}} & lt;/td>
& lt; td> {{book.author}} & lt;/td>
& lt; td> {{book.price}} & lt;/td>
& lt;/tr>
& lt; tr>
& lt; td colspan=?”比;
& lt;按钮类型=鞍磁ァ崩?癰tn btn-primary data-toggle”=澳Ｌ笔菽勘?" # myModal "祝辞add
& lt;按钮类型=鞍磁ァ眂lass=癰tn btn-primary”v:点击=癲elItems祝辞delete
& lt;/td>
& lt;/tr>
& lt;/table>
& lt; p>检查名字:{{checkedNames}} & lt;/p>
& lt; !——开始模态——比;
& lt; div类="模态消失" id=" myModal " tabindex=?”=岸曰翱颉盿ria-labelledby=癿yModalLabel”角色aria-hidden=" true "比;
& lt; div类=澳Ｌ曰翱颉北?
祝辞& lt; div class="模式内容”;
& lt; div类=癿odal-header”比;
& lt;按钮类型=鞍磁ァ眂lass=肮乇铡眃ata-dismiss=澳Ｌ弊４? lt;跨度aria-hidden=" true "祝辞,次;& lt;/span> & lt;跨类=皊r-only祝辞Close & lt;/button>
& lt; h5类=" modal-title " id=癿yModalLabel”在模态title
& lt;/div>
& lt; div类=癿odal-body”比;
& lt;输入类="表单控件"占位符=v模型“输入id=癰ook.id”比;
& lt;输入类="表单控件"占位符=v模型“输入作者”=癰ook.author”比;
& lt;输入类="表单控件"占位符=笆淙朊啤眝模型=癰ook.name”比;
& lt;输入类="表单控件"占位符=笆淙爰鄹瘛眝模型=癰ook.price”比;
& lt;/div>
& lt; div类=癿odal-footer”比;
& lt;按钮类型=鞍磁ァ崩?癰tn btn-default data-dismiss”=澳Ｌ弊４荂lose
& lt;按钮类型=鞍磁ァ崩?癰tn btn-primary data-dismiss”=澳Ｌ眝:点击=癮ddItem”在拯救changes
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; !——结束模态——比;
& lt;/div>
& lt;/div>
& lt; !——结束列表——比;
& lt;/div>
& lt;/body>
& lt; script>
新Vue ({
埃尔:“#应用”,
数据:{
书:{
id:“0”,
作者:”,
名称:”,
价格:“
}，
checkedNames: [],
书:[{
id: ' 1 ',
作者:“曹雪芹”,
名称:“红楼梦”,
价格:32.0
}, {
id: ' 2 ',
作者:“施耐庵”,
名称:“水浒传”,
价格:30.0
}, {
id:“3”,
作者:“罗贯中”,
名称:“三国演义”,
价格:24.0
}, {
id:“4”,
作者:“吴承恩”,
名称:“西游记”,
价格:20.0
})
}，
方法:{
delItems:函数(){
(var=0;我& lt;this.checkedNames。长度;我+ +){
(var j=0;j & lt;this.books。长度;j + +) {
var cur_book=this.books [j];
如果(cur_book。id==this.checkedNames[我]){
this.books.splice (j, 1);
}
}
}
这一点。checkedNames=[];
}，
addItem:函数(){
this.books.push (this.book);
}
}
}）
& lt;/script>
& lt;/html>
以上这篇利用vue.js把静态json绑定表引导的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
