Vue-(3)循環(huán)-計(jì)算-監(jiān)聽(tīng)-樣式綁定-事件處理

一：循環(huán)語(yǔ)句

Vue.js 循環(huán)語(yǔ)句关带，循環(huán)使用 v-for 指令侥涵。
v-for 指令需要以 site in sites形式的特殊語(yǔ)法，sites是源數(shù)據(jù)數(shù)組并且 site 是數(shù)組元素迭代的別名宋雏。
v-for可以綁定數(shù)據(jù)到數(shù)組來(lái)渲染一個(gè)列表：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

1. Runoob
2. Google
3. Taobao

v-for 迭代對(duì)象
v-for 可以通過(guò)一個(gè)對(duì)象的屬性來(lái)迭代數(shù)據(jù)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鳥(niǎo)教程',
      url: 'http://www.runoob.com',
      slogan: '學(xué)的不僅是技術(shù)芜飘，更是夢(mèng)想！'
    }
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

菜鳥(niǎo)教程
http://www.runoob.com
學(xué)的不僅是技術(shù)磨总，更是夢(mèng)想嗦明！

你也可以提供第二個(gè)的參數(shù)為鍵名：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鳥(niǎo)教程',
      url: 'http://www.runoob.com',
      slogan: '學(xué)的不僅是技術(shù)，更是夢(mèng)想蚪燕！'
    }
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

name : 菜鳥(niǎo)教程
url : http://www.runoob.com
slogan : 學(xué)的不僅是技術(shù)娶牌，更是夢(mèng)想官套！

第三個(gè)參數(shù)為索引：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鳥(niǎo)教程',
      url: 'http://www.runoob.com',
      slogan: '學(xué)的不僅是技術(shù)秘豹，更是夢(mèng)想！'
    }
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

0. name : 菜鳥(niǎo)教程
1. url : http://www.runoob.com
2. slogan : 學(xué)的不僅是技術(shù)，更是夢(mèng)想他宛！

v-for 迭代整數(shù)
v-for 也可以循環(huán)整數(shù)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app'
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

1
2
3
4
5
6
7
8
9
10

二：監(jiān)聽(tīng)屬性

Vue.js 監(jiān)聽(tīng)屬性 watch，我們可以通過(guò) watch 來(lái)響應(yīng)數(shù)據(jù)的變化

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
 <p style = "font-size:25px;">計(jì)數(shù)器: {{ counter }}</p>
 <button @click = "counter++" style = "font-size:25px;">點(diǎn)我</button>
</div>
<script type = "text/javascript">
 var vm = new Vue({
    el: '#app',
    data: {
       counter: 1
    }
 });
 vm.$watch('counter', function(nval, oval) {
    alert('計(jì)數(shù)器值的變化 :' + oval + ' 變?yōu)?' + nval + '!');
 });
</script>
</body>
</html>

運(yùn)行結(jié)果：

QQ20210817-102948-HD.gif

以下實(shí)例進(jìn)行千米與米之間的換算：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
   <body>
      <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
       <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一個(gè)實(shí)例方法
        vm.$watch('kilometers', function (newValue, oldValue) {
            // 這個(gè)回調(diào)將在 vm.kilometers 改變后調(diào)用
            document.getElementById ("info").innerHTML = "修改前值為: " + oldValue + "卿吐，修改后值為: " + newValue;
        })
      </script>
   </body>
</html>

運(yùn)行結(jié)果：

QQ20210817-104505-HD.gif

二：樣式綁定

class 與style 是 HTML元素的屬性富弦，用于設(shè)置元素的樣式，我們可以用 v-bind來(lái)設(shè)置樣式屬性壹罚。
v-bind 在處理 class和 style 時(shí)葛作， 專(zhuān)門(mén)增強(qiáng)了它。表達(dá)式的結(jié)果類(lèi)型除了字符串之外猖凛，還可以是對(duì)象或數(shù)組赂蠢。

class屬性綁定
我們可以為 v-bind:class 設(shè)置一個(gè)對(duì)象，從而動(dòng)態(tài)的切換 class:
實(shí)例中將 isActive 設(shè)置為 true 顯示了一個(gè)綠色的 div 塊辨泳，如果設(shè)置為 false 則不顯示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="{ 'active': isActive }"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

image.png

再看一個(gè)demo1：
text-danger 類(lèi)背景顏色覆蓋了 active 類(lèi)的背景色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
     v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasError: true
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

image.png

再看一個(gè)demo2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
  <div v-bind:class="classObject"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    classObject: {
      active: true,
      'text-danger': true
    }
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

image.png

再看一個(gè)demo3：
我們還可以使用三元表達(dá)式來(lái)切換列表中的 class ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
  <div class="static"
     v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    hasError: true
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

image.png

數(shù)組語(yǔ)法
可以把一個(gè)數(shù)組傳給 v-bind:class 虱岂，實(shí)例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
    width: 100px;
    height: 100px;
    background: green;
}
.text-danger {
    background: red;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

image.png

demo2:
errorClass 是始終存在的，isActive 為 true 時(shí)添加 activeClass 類(lèi)：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.text-danger {
    width: 100px;
    height: 100px;
    background: red;
}
.active {
    width: 100px;
    height: 100px;
    background: green;
}
</style>
</head>
<body>
<div id="app">
    <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    activeClass: 'active',
    errorClass: 'text-danger'
  }
})
</script>
</body>
</html>

運(yùn)行結(jié)果：

image.png

三：內(nèi)聯(lián)樣式

可以在 v-bind:style 直接設(shè)置樣式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥(niǎo)教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    activeColor: 'green',
    fontSize: 30
  }
})
</script>
</body>
</html>

結(jié)果：

image.png

demo2如下:
直接綁定到一個(gè)樣式對(duì)象菠红，讓模板更清晰

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div v-bind:style="styleObject">菜鳥(niǎo)教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    styleObject: {
      color: 'green',
      fontSize: '30px'
    }
  }
})
</script>
</body>
</html>

結(jié)果：

image.png

demo3：
v-bind:style可以使用數(shù)組將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鳥(niǎo)教程</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'green',
      fontSize: '30px'
    },
    overridingStyles: {
      'font-weight': 'bold'
    }
  }
})
</script>
</body>
</html>

結(jié)果：

image.png

四：事件處理器

事件監(jiān)聽(tīng)可以使用v-on指令：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>這個(gè)按鈕被點(diǎn)擊了 {{ counter }} 次第岖。</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>
</body>
</html>

結(jié)果點(diǎn)擊一次就+1：

//點(diǎn)擊一次的結(jié)果
這個(gè)按鈕被點(diǎn)擊了 1 次。

通常情況下试溯，我們需要使用一個(gè)方法來(lái)調(diào)用 JavaScript 方法蔑滓。
v-on 可以接收一個(gè)定義的方法來(lái)調(diào)用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 對(duì)象中定義方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指當(dāng)前 Vue 實(shí)例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接調(diào)用方法
app.greet() // -> 'Hello Vue.js!'
</script>
</body>
</html>

結(jié)果：

image.png

除了直接綁定到一個(gè)方法，也可以用內(nèi)聯(lián) JavaScript 語(yǔ)句：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>
</body>
</html>
image.png

image.png

四：事件修飾符

Vue.js 為v-on提供了事件修飾符來(lái)處理 DOM 事件細(xì)節(jié)遇绞，如：event.preventDefault()或 event.stopPropagation()键袱。
Vue.js通過(guò)由點(diǎn) . 表示的指令后綴來(lái)調(diào)用修飾符。

  • .stop - 阻止冒泡
  • .prevent - 阻止默認(rèn)事件
  • .capture - 阻止捕獲
  • .self - 只監(jiān)聽(tīng)觸發(fā)該元素的事件
  • .once - 只觸發(fā)一次
  • .left - 左鍵事件
  • .right - 右鍵事件
  • .middle - 中間滾輪事件
<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián)  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能點(diǎn)擊一次摹闽，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

按鍵修飾符
Vue 允許為v-on 在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)添加按鍵修飾符：

<!-- 只有在 keyCode 是 13 時(shí)調(diào)用 vm.submit() -->
<input v-on:keyup.13="submit">

記住所有的keyCode比較困難蹄咖，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫(xiě)語(yǔ)法 -->
<input @keyup.enter="submit">

全部的按鍵別名：

  • .enter
  • .tab
  • .delete (捕獲 "刪除" 和 "退格" 鍵)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
  • .ctrl
  • .alt
  • .shift
  • .meta

實(shí)例

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市付鹿，隨后出現(xiàn)的幾起案子比藻，更是在濱河造成了極大的恐慌，老刑警劉巖倘屹，帶你破解...
    沈念sama閱讀 221,635評(píng)論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件银亲，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡纽匙，警方通過(guò)查閱死者的電腦和手機(jī)务蝠，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)烛缔，“玉大人馏段，你說(shuō)我怎么就攤上這事轩拨。” “怎么了院喜？”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,083評(píng)論 0贊 360
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵亡蓉，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我喷舀，道長(zhǎng)砍濒，這世上最難降的妖魔是什么？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,640評(píng)論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任硫麻，我火速辦了婚禮爸邢，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘拿愧。我一直安慰自己杠河，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布浇辜。 她就那樣靜靜地躺著券敌，像睡著了一般。 火紅的嫁衣襯著肌膚如雪柳洋。 梳的紋絲不亂的頭發(fā)上待诅，一...
    開(kāi)封第一講書(shū)人閱讀 52,262評(píng)論 1贊 308
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音膳灶，去河邊找鬼。 笑死立由，一個(gè)胖子當(dāng)著我的面吹牛轧钓，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锐膜，決...
    沈念sama閱讀 40,833評(píng)論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼毕箍，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了道盏？” 一聲冷哼從身側(cè)響起而柑，我...
    開(kāi)封第一講書(shū)人閱讀 39,736評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤，失蹤者是張志新（化名）和其女友劉穎荷逞，沒(méi)想到半個(gè)月后媒咳，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡种远，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年涩澡，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坠敷。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡妙同，死狀恐怖射富，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情粥帚，我是刑警寧澤胰耗，帶...
    沈念sama閱讀 36,185評(píng)論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站芒涡，受9級(jí)特大地震影響柴灯，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜拖陆，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3贊 333
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一弛槐、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧依啰，春花似錦乎串、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,340評(píng)論 0贊 24
  • 一樁弒父案叹誉，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至闷旧，卻和暖如春长豁，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背忙灼。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,460評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工匠襟， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人该园。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3贊 376
  • 代替公主和親
    正文 我出身青樓酸舍，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親里初。 傳聞我的和親對(duì)象是個(gè)殘疾皇子啃勉，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2贊 359

推薦閱讀更多精彩內(nèi)容