vue学习02

样例代码一

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<style>
    .active {
        color: red;
    }
style>
<div id="app">
    <ul>
        <li v-for="(item,index) in movies"
            :class="{active:currentIndex===index}"
            @click="liclick(index)"
        >{{item}}
        li>
    ul>
div>
<body>
<script src="../js/vue.js">script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            movies: ['海王', '海王2', '海王3', '海王4'],
            currentIndex: 0
        },
        methods:{
            liclick(index){
                this.currentIndex=index;
            }
        }
    })
script>
body>
html>

样例二

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="style.css">
head>
<body>
<div id="app">
    <div v-if="books.length">
        <table>
            <thead>
            <tr>
                <th>th>
                <th>书籍名称th>
                <th>出版日期th>
                <th>价格th>
                <th>价格2th>
                <th>购买数量th>
                <th>操作th>
            tr>
            thead>
            <tbody>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}td>
                <td>{{item.name}}td>
                <td>{{item.date}}td>
                <td>{{getFinalPrice(item.price)}}td>
                <td>{{item.price|showPrice}}td>
                <td>
                    <button @click="decrement(index)"
                            v-bind:disabled="item.count <= 1">-
                    button>
                    {{item.count}}
                    <button @click="increment(index)">+button>
                td>
                <td>
                    <button @click="removeClick">移除button>
                td>
            tr>
            tbody>
        table>
        <h2>总价格:{{totalPrice|showPrice}}h2>
    div>
    <h2 v-else>购物车为空h2>
div>
<script src="../js/vue.js">script>
<script src="main.js">script>
body>
html>
table {
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}

th. td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
}

th {
    background-color:#f7f7f7;
    color: #5c6b77;
    font-weight: 600;
}
const app = new Vue({
    el: "#app",
    data: {
        books: [{
            id: 1,
            name: '《算法导论》',
            date: '2006-9',
            price: 85.00,
            count: 1
        }, {
            id: 2,
            name: '《算法导论2》',
            date: '2006-9',
            price: 85.00,
            count: 1
        }, {
            id: 3,
            name: '《算法导论3》',
            date: '2006-9',
            price: 85.00,
            count: 1
        }
        ]
    },
    methods:{
        getFinalPrice(price){
            return '¥'+price.toFixed(2)
        },
        increment(index){
            this.books[index].count++
        },
        decrement(index){
            this.books[index].count--
        },
        removeClick(index){
            this.books.splice(index,1)
        }
    },
    computed:{
        totalPrice(){
            let totalPrice=0;
            for(let i=0;i

vue学习02_第1张图片

你可能感兴趣的:(笔记,html,ajax,javascript)