需要为app做个音乐管理的内容，我的想法就是在一个页面内完成，展示与编辑修改为一个输入框，那么我需要在span上面进行设置contentedit=true让span可以自由编辑，也要让vue能够获取到改变了的值，来对操作进行更新删除提交。
问题
这里如果使用v-model，就有问题了，首先它无法作用在span组件上，另外如果设置contentedit它也无法获取内容。以此便只能使用一个小技巧.
小技巧
在span中@blur=’music.icon=$event.target.innerText' v-html='music.icon' 在焦点事件中处理span的内容变化，这样更新后，在事件处理上面就可以调用@clck="operation(music)"
<span class="text-danger" v-html="music.title" @blur="music.title=$event.target.innerText"
contenteditable="true"></span>
<span>
<button class="btn btn-danger btn-sm" @click="delete_music(music)">删除</button>
</span>
<span>
<button class="btn btn-primary btn-sm" @click="update_music(music)">更新</button>
</span>
<span>
<button class="btn btn-success btn-sm" @click="add_music(music)">添加</button>
</span>
全部代码如下
{% extends 'base.html' %}
{% block content %}
<h2>后台系统</h2>
<div class="column header">
<h4 style="text-indent: 50px;font-size: 16px;">在此管理您的音乐</h4>
{% if current_user.username %}
<div class="float-right">{{ current_user.username }}您已经登录 <a href="{{ url_for('auth.logout') }}">登出</a>
</div>
{% else %}
<div class="float-right">
您还未登录
<a href="{{ url_for('auth.login') }}">登入</a>
<a href="{{ url_for('auth.register') }}">注册</a>
</div>
{% endif %}
</div>
<div class="container" id="app" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml" >
<div class="list-group">
<ul class="list-group">
<li class="list-group-item list-group-item-success">
<span>id</span>
<span>曲目</span>
<span>种类</span>
<span>文件名称</span>
<span>封面</span>
<span>歌词名称</span>
<span>作者</span>
</li>
<li class="list-group-item list-group-item-light" v-for="music in musics">
<span v-html="music.id"></span>
<span class="text-danger" v-html="music.title" @blur="music.title=$event.target.innerText" contenteditable="true"></span>
<span contenteditable="true" v-html="music.category" @blur="music.category=$event.target.innerText"></span>
<span contenteditable="true" v-html="music.filename" @blur="music.filename=$event.target.innerText"></span>
<span contenteditable="true" @blur="music.icon=$event.target.innerText"><a v-bind:href='music.icon'>封面链接</a></span>
<span contenteditable="true" v-html="music.lyc" @blur="music.lyc=$event.target.innerText"> </span>
<span contenteditable="true" v-html="music.name" @blur="music.name=$event.target.innerText"></span>
<div class="float-right">
<span>
<button class="btn btn-danger btn-sm" @click="delete_music(music)">删除</button>
</span>
<span>
<button class="btn btn-primary btn-sm" @click="update_music(music)">更新</button>
</span>
<span>
<button class="btn btn-success btn-sm" @click="add_music(music)">添加</button>
</span>
</div>
</li>
</ul>
</div>
</div>
{% endblock %}
{% block addjs %}
<script>
new Vue({
delimiters: ['{[', ']}'],
el: '#app',
data: {
musics: [],
},
created: function () {
let f = this;
$.get('/app/music', function (v) {
f.musics = v.data;
})
},
methods: {
delete_music: function (music) {
alert(music.icon);
},
add_music: function () {
alert(music.icon)
},
update_music: function (music) {
alert(music.icon);
}
}
});
</script>
{% endblock %}
created中是在页面加载之前进行获取数据的操作，这里调用api进行所有曲目的音乐获取.
