VUE 简单属性操作

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在main.js内配置路由及相应模板

import Vue from 'vue'

import App from './App'

// 引入router路由

import Router from 'vue-router'

// 引入项目的四个模块组件

import index from './components/index'

import d2 from './components/d2'

import login from './components/login'

import register from './components/register'

import cart from './components/cart'

import detail from './components/detail'

import test from './components/test'

// 使用router

Vue.use(Router)

// 定义路由

var routes = [

  {

    path: '/',

    component: index

  }

  ,{

  path: '/index',

  component: index

}, {

  path: '/d2',

  component: d2

}, {

  path: '/login',

  component: login

},{

  path: '/register',

  component: register

},{

  path: '/cart',

  component: cart

},{

  path: '/detail',

  component: detail

},{

  path: '/test',

  component: test

},

]

// 实例化路由

var vueRouter = new Router({

  mode:'history',

  routes:routes

})

// 创建和挂载根实例

new Vue({

  mode:'history',

  el: '#app',

  router: vueRouter,

  template: '<App></App>',

  components: { App }

})

具体模板代码：

<template>

    <div>

        <input type="text"  v-model="message">

        {{ message +"不好啊"}}

        <br>

        {{ message.split("").reverse().join("") }}

        <br>

        {{ message | reverse | uppercase }}

    <br>

        <div v-show="flag">

            你能看到我

        </div>

        <div v-if="num==10">

            num={{10}}

        </div>

        <div v-else-if="num=9">

                num=9

         </div>

        <div v-else>

            num != 10

        </div>

    <ul>

        <li v-for="item in tlist">

            {{ item.text }}

        </li>

    </ul>

    反转前：{{ message }}<br>

    反转后：{{ reverse_message }}

    <br>

    <table>

        <tr v-for="(item,index) in datalist">

            <td>{{ item.name }}</td>

            <td>

                <button @click="minus(index)">-</button>

                <input type="text"  v-model="item.num">

                <button @click="add(index)">+</button>

            </td>

        </tr>

    </table>

</div>

</template>

<script>

    export default {

      data () {

        return {

        message:'hello world',

        tlist:[{text:'汽车'},{text:'面包'}],

        flag:1,

        num:9,

        datalist:[{name:'汽车',num:2},{name:'飞机',num:0}]

        }

      },

      //监听属性

      computed:{

        reverse_message:function(){

            return this.message.split('').reverse().join('')

        }

      },

      //绑定事件

      methods:{

          add:function(index){

              this.datalist[index].num++;

          },

          minus:function(index){

              if(this.datalist[index].num > 0){

                this.datalist[index].num--;

              }else{

                  alert("商品不能为空")

              }

          },

      }

    }

</script>

<style>

</style>