发表于： 2021-04-25 21:36:41
1 954
今天完成的事情：
学习使用vue
修改导航栏
<div id="nav" class="nav">
<div class="nav-name">{{a}}</div>
<div class="nav-bar">
<a href="">{{b}}</a>
<a href="">{{c}}</a>
<a href=""> <img src="./resources/images/task6退出键1.gif"></a>
</div>
</div>
vue.js
const nav = {
data() {
return {
a: '萝卜多后台管理系统',
b: '猎头',
c: 'user',
}
}
}
Vue.createApp(nav).mount('#nav')
修改下拉表单：
<div id="app1">
<span>类 型</span>
<select v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<span>选择的是: {{ selected }}</span>
</div>
<div id="app2">
<span>状 态</span>
<select v-model="selected">
<option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>
<span>选择的是: {{ selected }}</span>
</div>
vue
const app1 = {
data() {
return {
selected: '全部',
options: [
{ text: '全部', value: '全部' },
{ text: '首页Banner', value: '首页Banner' },
{ text: '找职位Banner', value: '找职位Banner' },
{ text: '找精英Banner', value: '找精英Banner' },
{ text: '行业大图', value: '行业大图' }
]
}
}
}
Vue.createApp(app1).mount('#app1')
const app2 = {
data() {
return {
selected: '全部',
options: [
{ text: '全部', value: '全部' },
{ text: '上线', value: '上线' },
{ text: '草稿', value: '草稿' }
]
}
}
}
Vue.createApp(app2).mount('#app2')
问题：
关于原生代码与jquery的区别：为什么原生的事件点击不生效，而jquery生效
var leftBtn = document.getElementById('left-btn2');
var listBtn = document.getElementById('list-btn');
$("#left-btn2").click(function () {
$('h1').css('display', 'none')
$('.Article_list').css('display', 'block')
$('.Article_add').css('display', 'none')
})
// leftBtn.onclick = function () {
// $('h1').css('display', 'none')
// $('.Article_list').css('display', 'block')
// $('.Article_add').css('display', 'none')
// }
返回列表
评论