html vue簡單
1.Vue 簡單的替換更新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<h2>{{ product }}Python</h2>
</div>
</body>
<!-- <script src='js/vue.min.js'></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#app',
data: {
product:'流浪'
}
})
</script>
</html>
2.v-bind-更新標籤屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue_v-bind-更新標籤屬性</title>
</head>
<body>
<div id="page">
<a id="prev" v-bind:href= prev>上一頁</a>
<a id="next" v-bind:href= next>下一頁</a>
</div>
</body>
<!-- <script src='js/vue.min.js'></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#page',
data: {
prev:'https://www.bootcdn.cn/',
next:'https://www.baidu.com/'
}
})
</script>
</html>
3.v-for_模板更新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue_v-for_模板更新</title>
</head>
<body>
<div id='app'>
<table id="emp">
<thead>
<tr>
<th>編號</th>
<th>名字</th>
<th>做用</th>
</tr>
</thead>
<tbody>
<tr v-for = 'emp in emps'>
<td>{{emp.no}}</td>
<td>{{emp.name}}</td>
<td>{{emp.job}}</td>
</tr>
</tbody>
</table>
</div>
<!-- <script src="js/vue.min.js"></script> -->
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<script>
const app = new Vue({
el:'#app',
data:{
emps:[{no:'01',name:'錘錘',job:'讓人笑'},
{no:'02',name:'狗娃子',job:'好養活'},
{no:'03',name:'召喚師',job:'召喚神獸'}
]
}
})
</script>
</body>
</html>
4.v-if_v-else
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue_v-if_v-else</title>
</head>
<body >
<div id ='app'>
<h1 v-if="Math.random() > 0.5">Yes</h1>
<h1 v-else>No</h1>
<div v-if="Math.random() > 0.5">Sorry</div>
<div v-else>Not sorry</div>
</div>
</body>
<script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script>
<!-- <script src="js/vue.min.js"></script> -->
<script>
const app = new Vue({
el:'#app'
})
</script>
</html>
5.vue-computed(計算)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue-computed(計算)</title>
</head>
<body >
<div id ='app'>
<p>咱們的隊名是: "{{ message }}"</p>
<p>我能夠滾瓜爛熟: "{{ reversedMessage }}"</p>
</div>
</body>
<!-- <script src='https://cdn.bootcss.com/vue/2.6.10/vue.min.js'></script> -->
<script src="js/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: '流浪python'
},
computed: {
reversedMessage: function () {
// 先把字符串切片成列表,倒序後從新組合成字符串
return this.message.split('').reverse().join('')
}
}
})
</script>
</html>
相關文章
- 1. 簡單學習HTML
- 2. Html 簡單解析
- 3. HTML簡單介紹
- 4. html簡單定位
- 5. HTML簡單入門
- 6. HTML --- 簡單入門
- 7. html簡單總結
- 8. Html-簡單介紹
- 9. HTML簡單筆記
- 10. HTML簡單瞭解
- 更多相關文章...
- • ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
- • ASP.NET Web Forms - HTML 表單 - ASP.NET 教程
- • Github 簡明教程
- • Git可視化極簡易教程 — Git GUI使用方法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。