追記
値はHTMLに置き不変という前提で、コンポーネント利用で書いたデモです。
プロパティvalを同期させて、コンポーネントのvalを変更すると親のvalも
変更されるようになっています。
デモ
https://jsfiddle.net/3f52z5bn/
html
1<div id="app">
2 <sample :v=10 :val.sync=val></sample>
3 <sample :v=200 :val.sync=val></sample>
4 <button @click="getVal">val:{{val}}</button>
5</div>
6
7<script type="x/template" id="sample-template">
8<div class="wrap">
9 <button @click="select">{{v}}</button>
10</div>
11</script>
12
javascript
1Vue.component("sample", {
2 template: "#sample-template",
3 props: ["v", "val"],
4 data: function() {
5 return {
6 v: 0,
7 val: 0
8 };
9 },
10 methods: {
11 select: function() {
12 this.val = this.v;
13 }
14 }
15});
16
17new Vue({
18 el: "#app",
19 data: {
20 val: 0
21 },
22 methods: {
23 getVal: function() {
24 alert(this.val);
25 }
26 }
27});
最初の回答
HTML側に記述される値は固定とのことなので、vueでバインディングしないで
素のJavaScriptで取得したほうがシンプルかもしれませんね。
javascript
1methods: {
2 getVal: function() {
3 // 例:idで取得する場合
4 var hoge = document.getElementById('hoge').getAttribute('sampleAttr');
5 }
6}
vueの変数として利用する場合、HTML側の値と変数を結びつける
必要があるのでちょっと大げさな感じになります。
html
1<div class="wrap">
2 <span class="sample">10</span>
3 <input type="hidden" v-model="sampleAttr[0]" value="10">
4</div>
5
6<div class="wrap">
7 <span class="sample">200</span>
8 <input type="hidden" v-model="sampleAttr[1]" value="200">
9</div>
10
11<!-- sampleAttr = {0: 10, 1: 200} -->
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/08/26 01:49
2016/08/27 10:48